jQuery UI的套件Autocomplete,
如果想從網址動態取得資料,非常簡單,
但不知為何jquery ui的官網沒有提供使用網址動態取得資料的範例,
官方文件教學:
- Array: An array can be used for local data. There are two supported formats:
- An array of strings:
[ "Choice1", "Choice2" ]
- An array of objects with
label
andvalue
properties:[ { label: "Choice1", value: "value1" }, ... ]
- The label property is displayed in the suggestion menu. The value will be inserted into the input element when a user selects an item. If just one property is specified, it will be used for both, e.g., if you provide only
value
properties, the value will also be used as the label.
- String: When a string is used, the Autocomplete plugin expects that string to point to a URL resource that will return JSON data. It can be on the same host or on a different one (must provide JSONP). The Autocomplete plugin does not filter the results, instead a query string is added with a
term
field, which the server-side script should use for filtering the results. For example, if thesource
option is set to"http://example.com"
and the user typesfoo
, a GET request would be made tohttp://example.com?term=foo
. The data itself can be in the same format as the local data described above.
有看沒有懂,
不過實作後就會發現它的強大!
---範例---
jquery的部份:
$("#search").autocomplete({
source: 'http://example.com',
minLength: 1
});
c# 程式:
public ActionResult Search(string term)
{
string result = { "結果1", "結果2" };
return Json(result.ToArray(),JsonRequestBehavior.AllowGet);
}
1、autocomplete傳來的參數名稱為 term
2、autocomplete使用 get 的協定
3、autocomplete可以接受的回傳資料為json,如:
[ "Choice1", "Choice2" ]
或
[ { label: "Choice1", value: "value1" }, ... ]
留言
張貼留言