autocomplete插件的簡單例子

1.引入相應的js和css,我用到的時候是在jquery-ui的js裡面整合的,ui的css

2.先在html上寫一個input

<input id="tags" class="form-control ui-autocomplete-input" autocomplete="off" type="text">
                                                <input id="tagsid"  type="text">

3.css上設置一下高主要是防止ie

.ui-autocomplete {
max-height: 424px;
overflow-y: auto;
/* 防止水平滾動條 */
overflow-x: hidden;
}
/* IE 6 不支持 max-height
* 我們使用 height 代替，但是這會強制菜單總是顯示為那個高度
*/
* html .ui-autocomplete {
height: 424px;
}

4.js

//autocomplete
                var projects = [
                {
                    value: "218",
                    label: "jQuery",
                    desc: "28",
                    icon: ""
                },
                {
                    value: "105",
                    label: "jQuery UI",
                    desc: "28",
                    icon: ""
                },
                {
                    value: "105",
                    label: "jQuery UI",
                    desc: "28",
                    icon: ""
                },
                {
                    value: "105",
                    label: "jQuery UI",
                    desc: "28",
                    icon: ""
                },
                {
                    value: "105",
                    label: "jQuery UI",
                    desc: "28",
                    icon: ""
                },
                {
                    value: "105",
                    label: "jQuery UI",
                    desc: "28",
                    icon: ""
                },
                {
                    value: "105",
                    label: "jQuery UI",
                    desc: "28",
                    icon: ""
                },
                {
                    value: "105",
                    label: "jQuery UI",
                    desc: "28",
                    icon: ""
                },
                {
                    value: "105",
                    label: "jQuery UI",
                    desc: "28",
                    icon: ""
                },
                {
                    value: "105",
                    label: "jQuery UI",
                    desc: "28",
                    icon: ""
                },
                {
                    value: "105",
                    label: "jQuery UI",
                    desc: "28",
                    icon: ""
                },
                {
                    value: "105",
                    label: "jQuery UI",
                    desc: "28",
                    icon: ""
                },
                {
                    value: "105",
                    label: "jQuery UI",
                    desc: "28",
                    icon: ""
                },
                {
                    value: "105",
                    label: "jQuery UI",
                    desc: "28",
                    icon: ""
                },
                {
                    value: "105",
                    label: "jQuery UI",
                    desc: "28",
                    icon: ""
                },
                {
                    value: "105",
                    label: "jQuery UI",
                    desc: "28",
                    icon: ""
                },
                {
                    value: "105",
                    label: "jQuery UI",
                    desc: "28",
                    icon: ""
                },
                {
                    value: "105",
                    label: "jQuery UI",
                    desc: "28",
                    icon: ""
                },
                {
                    value: "105",
                    label: "jQuery UI",
                    desc: "28",
                    icon: ""
                },
                {
                    value: "105",
                    label: "jQuery UI",
                    desc: "28",
                    icon: ""
                },
                {
                    value: "105",
                    label: "jQuery UI",
                    desc: "28",
                    icon: ""
                }
            ];
                $( "#tags" ).autocomplete({
                    minLength: 0,
                    source: projects,
                    focus: function( event, ui ) {
               //alert(ui.item.label);//選擇到哪一個.
                return false;
              },
              select: function( event, ui ) {
                  //真正的選擇.
                  //alert(ui.item.label);
                  $("#tagsid").val(ui.item.value);
                  //alert(ui.item.desc);
                  //alert(ui.item.icon);
                return false;
              }
                })
                $("#tags").data("ui-autocomplete")._renderItem = function (ul, item) {
                    return $( "<li>" ).append( "<a><table width='400px'><tr><td align='left'>" + item.label + "</td><td align='right'><font style='color: #009933; font-family: 黑體; font-style: italic'>約" + item.desc + "個寶貝</font>&nbsp;&nbsp;</td></tr></table></a>" ).appendTo( ul );
                }