(jQuery插件)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 );
                }