jquery autocomplete 搜索框提示 输入自动补全

本来是用select2在那里折腾了很久，后来发现用autocomplete自己写一下还更容易一些！

好的，主要实现的功能是，用户输入之后，每次输入都要从后台数据库拉出与用户输入模式匹配的信息。

先看效果图：

1. HTML

head部分加入对jquery-ui的引用

  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

一个Input足以

<input id="right" type="text" name="myname"></input>

2. JS

js部分主要是，对该input的keyup操作进行处理，在该操作里，获取用户输入，并且把输入发往后台。从后台获取信息后，使用autocomplete完成。总之，就是挺简单的。

$(document).ready(function () {
    (function(){

        var insertOptions = function(data, id) {
            var result = new Array();
            $.each(data, function(i, item){
                result.push(item);
            });
            $('#' + id).autocomplete({
                source: result
            });
        }

        $('.myname').keyup(function(){
            var right_id = $(this).attr('id');
            var url = "http://...";
            $.get(url, function(data) {
                insertOptions(data, right_id);
            }, "json");
        });

    })();
});