Bootstrap Typeahead 组件

网卡有很多例子并不能实现自动补全功能，这里记录关键代码

<!-- 代码补全javascript -->
<script type="text/javascript">
$(document).ready(function ($) {
$.fn.typeahead.Constructor.prototype.blur = function () {
   var that = this;
   setTimeout(function () { that.hide() }, 250);
};


var arr_autocomplete = [];//存放自动补全的数组

var that = this;

$('#product_search').typeahead({
   source: function (query, process) {


       $('#product').hide();

       $.post("${base}/pub/ajax_query.jsp", { query: query }, function (data) {


                if (data.length == 0) { alert("没有查到对应的人"); return; }
                arr_autocomplete = data;
                var results = _.map(arr_autocomplete, function (product) {
                   return product.id+"";
           });

                process(results);
       });


   },

   matcher: function (item) {
       return true;
   },

   highlighter: function (id) {
       var product = _.find(arr_autocomplete, function (p) {
           return p.id == id;
       });
       return product.name + " ($" + product.price + ")";
   },

   updater: function (id) {
       var product = _.find(arr_autocomplete, function (p) {
           return p.id == id;
       });
       that.setSelectedProduct(product);
       return product.name;
   },



});

$('#product').hide();
this.setSelectedProduct = function (product) {
   $('#product').html("Purchase: " + product.name + " ($" + product.price+"_"+ product.id+ ")").show();
}
})
</script>
<!-- 代码补全javascript end1 -->

<div class="form-group">
        <label for="product_search">Product Search: </label>
        <input id="product_search" type="text" data-provide="typeahead">
        <div id="product" style="border-width: 1; padding: 5px; border-style: solid"></div>
    </div>

后台代码：

@RequestMapping("/ajax_query.jsp")
    public void ajax_query(String query, HttpServletRequest request,
        HttpServletResponse response) throws Exception {

        JSONArray arr = new JSONArray();

        System.out.println("query:"+query);

       JSONObject o;


        o = new JSONObject();
           o.put("id", 1);
           o.put("name", "西安");
           o.put("price", 1.6);
           arr.put(o);

           o = new JSONObject();
        o.put("id", 2);
        o.put("name", "上海");
        o.put("price", 2.6);
        arr.put(o);

        o = new JSONObject();
        o.put("id", 3);
        o.put("name", "长沙");
        o.put("price", 3.6);
        arr.put(o);

        o = new JSONObject();
        o.put("id", 4);
        o.put("name", "武汉");
        o.put("price", 4.6);
        arr.put(o);

        o = new JSONObject();
        o.put("id", 5);
        o.put("name", "合肥");
        o.put("price", 5.6);
        arr.put(o);

        o = new JSONObject();
        o.put("id", 6);
        o.put("name", "天津");
        o.put("price", 6.6);
        arr.put(o);

        o = new JSONObject();
        o.put("id", 7);
        o.put("name", "吉林");
        o.put("price", 7.6);
        arr.put(o);

        o = new JSONObject();
        o.put("id", 8);
        o.put("name", "新疆");
        o.put("price", 8.6);
        arr.put(o);

        o = new JSONObject();
        o.put("id", 9);
        o.put("name", "广西");
        o.put("price", 9.6);
           arr.put(o);


       ResponseUtil.renderJson(response, arr.toString());
    }

参考文献：
1.使用 Bootstrap Typeahead 组件
2.Bootstrap typeahead使用问题记录及解决方案, http://blog.csdn.net/lanxuezaipiao/article/details/48193525