码迷,mamicode.com
首页 > Web开发 > 详细

html5 模糊匹配搜索框

时间:2017-11-21 10:51:29      阅读:302      评论:0      收藏:0      [点我收藏+]

标签:htm   而不是   return   字符串数组   json   logs   html5   ack   文件   

使用bootstrap3-typeahead.js

文件在这里

引用:

 <script type="text/javascript" src="@Url.Content("XXXXX/bootstrap3-typeahead.js")" charset="UTF-8"></script>

input控件

<input id="local_data" autocomplete="off" data-provide="typeahead" type="text" style="background: white"
                               class="input-sm form-control" placeholder="输入关键字以搜索" />

JS样例代码

var initSearchLabel = function () {
    var resultKeyAndValue = {};
    $("#local_data").typeahead({
        source: function (query, process) {
            //query是输入的值
            var names = new Array();
            $.ajax({
                type: "GET",
                url: "XXXXXXXX",
                datatype: "json",
                contentType: "application/json; charset=utf-8",
                cache: false,
                traditional: true,
                async: false,
                success: function (result) {
                    result = JSON.parse(result);
                   //处理得到的JSON数据,var resultList = JSON.parse(result);
           //如果得到的数据是对象数组而不是字符串数组,将要显示的搜索结果处理为一个字符串数组并返回 ;
           //如果在选中以后的处理方法中还需要被选中对象的其他参数,可以将选中的字符串与使用的其他参数做成一个Dictionary备用
for (var i = 0; i < resultList.length; i++) { names.push(resultList[i].NAME); } return process(names); }, error: function (result) { } }); }, updater: function (item) {
      //选中以后的数据处理。item为选中的字符串,resultKeyAndValue为success函数红提到的备用Dictionary,在此取出需要用到的参数。
var info = resultKeyAndValue[item];var name = info["name"]; $.ajax({ type: "GET", url: "YYYYYYYYYYYYYYY" , datatype: "json", contentType: "application/json; charset=utf-8", cache: false, traditional: true, async: false, success: function (result) { result = JSON.parse(result); }, error: function (result) { } }); return item; }, items: 100,//显示的搜索结果 delay: 500 //input控件中数据发生变化以后执行请求的间隔 }); }

该方法匹配的是完整字符串,还达不到百度输入框中的 多个关键字匹配方式

html5 模糊匹配搜索框

标签:htm   而不是   return   字符串数组   json   logs   html5   ack   文件   

原文地址:http://www.cnblogs.com/pangkang/p/7871770.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!