注意，我们提供了一个 source 函数来提供数据，这个函数接收两个参数，第一个参数 query 表示用户的输入，第二个参数是 process 函数，这个 process 函数是 typeahead 提供的，用来处理我们的数据。
如果你希望通过 Ajax 调用从服务器端获取匹配的数据，那么，在异步完成的处理函数中，你需要获取一个匹配的字符串数组，然后，将这个数组作为参数，调用 process 函数。
说了半天，数据都是从本地获取的，到底如何从服务器端获取数据呢？
其实很简单，在 source 函数中，自己调用 Ajax 方法来获取数据，主要注意的是，在获取数据之后，调用 typeahead 的 process 函数处理即可。
$(&＃39;#product_search&＃39;).typeahead({
source: function (query, process) {
var parameter = {query: query};
$.post(&＃39;@Url.Action("AjaxService")&＃39;, parameter, function (data) {
process(data);
});
}
});当然了，在服务器上，你需要创建一个服务来提供数据，这里，我们演示使用随机数来生成一组随机数据的方法。
public ActionResult AjaxService(string query)
{
System.Collections.ArrayList list
= new System.Collections.ArrayList();
System.Random random = new Random();
for (int i = 0; i < 20; i++)
{
string item = string.Format("{0}{1}", query, random.Next(10000));
list.Add(item);
}
return this.Json(list);
}除了使用 source 函数之外，还可以使用 highlighter 函数来特别处理匹配项目的显示，使用 updater 函数，在选择了某个匹配项之后，做出一些后继的处理。
默认的 highlighter 是这样实现的，item 是匹配的项目，找到匹配的部分之后，使用 加粗了。
highlighter: function (item) {
var query = this.query.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, &＃39;\\$&&＃39;)
return item.replace(new RegExp(&＃39;(&＃39; + query + &＃39;)&＃39;, &＃39;ig&＃39;), function ($1, match) {
return &＃39;&＃39; + match + &＃39;&＃39;
})
}而 updater 的默认实现就更加简单了。
updater: function (item) {
return item
}我们可以重写这两个函数，来实现自定义的处理。
![[echarts] 同指标对比柱状图相关的知识介绍及应用示例](https://img7.php1.cn/3cdc5/c7bc/ae9/d860963d11bbd36d.jpeg)
京公网安备 11010802041100号