这篇文章给大家分享的是有关Bootstrap中Typeahead组件怎么用的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
目前创新互联已为千余家的企业提供了网站建设、域名、网络空间、网站改版维护、企业网站设计、龙陵网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。Bootstrap 中的 Typeahead 组件就是通常所说的自动完成 AutoComplete,功能很强大,但是,使用上并不太方便。这里我们将介绍一下这个组件的使用。
首先,最简单的使用方式,就是直接在标记中声明,通过data-provide="typeahead"来声明这是一个 typeahead 组件,通过 data-source= 来提供数据。当然了,你还必须提供 bootstrap-typeahead.js 脚本。
通常,我们使用脚本来填充数据,那么,页面可以变成如下的形式。
注意,我们提供了一个 source 函数来提供数据,这个函数接收两个参数,第一个参数 query 表示用户的输入,第二个参数是 process 函数,这个 process 函数是 typeahead 提供的,用来处理我们的数据。
如果你希望通过 Ajax 调用从服务器端获取匹配的数据,那么,在异步完成的处理函数中,你需要获取一个匹配的字符串数组,然后,将这个数组作为参数,调用 process 函数。
说了半天,数据都是从本地获取的,到底如何从服务器端获取数据呢?
其实很简单,在 source 函数中,自己调用 Ajax 方法来获取数据,主要注意的是,在获取数据之后,调用 typeahead 的 process 函数处理即可。
$('#product_search').typeahead({ source: function (query, process) { var parameter = {query: query}; $.post('@Url.Action("AjaxService")', 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, '\\$&') return item.replace(new RegExp('(' + query + ')', 'ig'), function ($1, match) { return '' + match + '' }) }
而 updater 的默认实现就更加简单了。
updater: function (item) { return item }
我们可以重写这两个函数,来实现自定义的处理。
实际上,你的数据可能是一组对象而不是一个字符串数组,下面的例子中,我们使用一个产品对象的数组来说明,每个产品对象有一个 id 编号,还有名称 name 和价格 price .
我们希望能够在提示中显示产品的更加详细的信息。
首先,修改我们的 source 函数,原来这个函数返回一个字符串的数组,现在我们返回一个产品 id 的数组,但是,process 函数期望得到一个字符串数组的参数,所以,我们将每个 id 都转换为字符串类型。
然后,typeahead 组件就会调用 matcher 函数来检查用户的输入是否与某个项目匹配,你可以使用产品的 id 在产品列表中获取产品对象,然后检查产品的名称与用户的输入是否匹配。
默认的 matcher 直接使用用户的输入来匹配,我们如果使用 id 的话,显然不能匹配,我们需要重写 matcher 函数。
matcher 接收一个当前项目的字符串,用户当前的输入为 this.query,匹配返回 true, 否则返回 false. 默认的 matcher 如下:
, matcher: function (item) { return ~item.toLowerCase().indexOf(this.query.toLowerCase()) }
将它重写为永远匹配,直接返回 true。而在 highlighter 中将显示结果替换为希望的产品名称和价格组合。在下一步的 highlighter 中,我们使用 Underscore 组件中的 find 方法,通过产品的 id 在产品列表中获取产品对象,然后,显示产品名称和价格的组合。
highlighter: function (id) { var product = _.find(products, function (p) { return p.id == id; }); return product.name + " ($" + product.price + ")"; }
默认的 updater 直接返回当前匹配的内容,我们这里是一个 id, 需要重写。
updater: function (item) { return item }
在用户选择之后,typeahead 将会调用 updater 函数,我们通过产品的 id 在产品列表中获取产品对象,然后
最后,updater 函数返回一个产品名称的字符串,为输入框提供内容。setSelectedProduct 是我们的一个自定义函数。
updater: function (id) { var product = _.find(products, function (p) { return p.id == id; }); that.setSelectedProduct(product); return product.name; }
下面是全部的代码。
感谢各位的阅读!关于“Bootstrap中Typeahead组件怎么用”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!