bootstrap输入框联想提示

小渣渣

界面用的bootstrap，想做个城市的联想输入，例如：输入s 就把s开头的城市列出来

重点不是这个！！！重点是，我点击联想的内容，能把内容对应的id放到文本框的tag属性里面！！！

效果图如上吧！！

我用的bootstrap typeahead这个插件，插件有很多版本。。。。。

我用的twitter-bootstrap-typeahead这个版本，链接地址：https://github.com/tcrosen/twitter-bootstrap-typeahead

比起其他版本的插件，功能不是很强大，但是足够我用了。

附上，我的前段代码：

1. <input id="txtcity" type="text" autocomplete="off" class="form-control" placeholder="城市" data-provide="typeahead" />

复制代码

1. $(function () {
   
2.         $("#txtcity").typeahead({
   
3.             ajax: {
   
4.                 url: '@Url.Action("CityList")',
   
5.                 //timeout: 300,
   
6.                 method: 'post',
   
7.                 triggerLength: 1,
   
8.                 dataType: 'JSON',
   
9.                 loadingClass: null,
   
10.                 displayField: 'localName',
    
11.                 preProcess: function (result) {
    
12.                     
    
13.                     return result;
    
14.                 }
    
15.             },
    
16.             display: "localName",
    
17.             val: "localID",
    
18.             items: 8,
    
19.             itemSelected: function (item, val, text) {
    
20.                 $("#txtcity").attr("tag", val);
    
21.                 $("#txtcity").val(text);
    
22.             },
    
23.             matcher: function (obj) {
    
24.                 //var item = JSON.parse(obj);
    
25.                 return true;
    
26.             }
    
27.         });
    
28.         $("#txtcity").blur(function (e) {
    
29.             var txt = $("#txtcity").val();
    
30.             if (txt == null || txt == undefined || $.trim(txt) == "")
    
31.             {
    
32.                 $("#txtcity").removeAttr("tag");
    
33.             }
    
34.         })
    
35.     });

复制代码

json数据

1. [{"localName":"上海","localID":"2","dirName":"sh"},{"localName":"上饶","localID":"10116","dirName":"sr"}]

复制代码

QWERTYU

看看  为什么还有字数限制啊