(jQuery插件)autocomplete插件的简单例子

最新推荐文章于 2020-04-24 23:49:04 发布

转载最新推荐文章于 2020-04-24 23:49:04 发布 · 118 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/historylyt/p/7214249.html

文章标签：

#javascript #ui #ViewUI

本文介绍如何使用 jQuery UI 实现一个自动补全输入框组件，包括引入必要的 JS 和 CSS 文件、设置 HTML 结构、调整样式以适应不同浏览器，并通过 JavaScript 初始化组件及自定义显示样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.引入相应的js和css,我用到的时候是在jquery-ui的js里面整合的,ui的css

2.先在html上写一个input

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>  </td></tr></table></a>" ).appendTo( ul );
               }