强大的jquery制作文本搜索框效果

最新推荐文章于 2019-09-18 20:43:40 发布

牵牛果

最新推荐文章于 2019-09-18 20:43:40 发布

阅读量621

点赞数

文章标签：文本框搜索搜索效果 autocomplete

本文链接：https://blog.csdn.net/guang526600482/article/details/25200479

版权

附上代码

记住引用（网上一大把，可加我qq136128874 给你）：

 <script src="/js/jquery-1.8.0.js" type="text/javascript"></script>
    <script src="/js/jquery.autocomplete.js" type="text/javascript"></script>

 <html>
<head  >
    <title></title> 
    <link href="/css/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script src="/js/jquery-1.8.0.js" type="text/javascript"></script>
    <script src="/js/jquery.autocomplete.js" type="text/javascript"></script>
    <script type="text/javascript">
        
        function checkContent() {
 

           var data=[{ name: '天津', id: '3', py: 'tianjin' },{ name: '河北', id: '4', py: 'hebei' },{ name: '山西', id: '5', py: 'shanxi' },{ name: '内蒙古', id: '6', py: 'neimenggu' },{ name: '辽宁', id: '7', py: 'liaoning' },{ name: '吉林', id: '8', py: 'jilin' },{ name: '山东', id: '10', py: 'shandong' },{ name: '江苏', id: '11', py: 'jiangsu' },{ name: '安徽', id: '12', py: 'anhui' },{ name: '浙江', id: '13', py: 'zhejiang' },{ name: '福建', id: '14', py: 'fujian' },{ name: '江西', id: '15', py: 'jiangxi' },{ name: '河南', id: '16', py: 'henan' },{ name: '湖北', id: '17', py: 'hubei' },{ name: '湖南', id: '18', py: 'hunan' },{ name: '广东', id: '19', py: 'guangdong' },{ name: '广西', id: '20', py: 'guangxi' },{ name: '贵州', id: '22', py: 'guizhou' },{ name: '云南', id: '23', py: 'yunnan' },{ name: '陕西', id: '24', py: 'shanxi1' },{ name: '甘肃', id: '25', py: 'gansu' },{ name: '宁夏', id: '26', py: 'ninxia' },{ name: '青海', id: '27', py: 'qinghai' },{ name: '西藏', id: '28', py: 'xizang' },{ name: '新疆', id: '29', py: 'xinjiang' },{ name: '海南', id: '30', py: 'hainan' },{ name: '重庆', id: '31', py: 'chongqing' },{ name: '香港', id: '32', py: 'xianggang' },{ name: '澳门 ', id: '33', py: 'aomen' },{ name: '台湾', id: '34', py: 'taiwan' }];

            $('#areaname').focus().autocomplete( data, {
               max: 500,  //列表里的条目数
                minChars: 0,    //自动完成激活之前填入的最小字符 
                width: 400,     //提示的宽度，溢出隐藏
                scrollHeight:200,   //提示的高度，溢出显示滚动条
                matchContains: true,    //包含匹配，就是data参数里的数据，是否只要包含文本框里的数据就显示
                autoFill: false,    //自动填充
                formatItem: function (row, i, max) { 
                    return "<table width='400px'><tr><td align='left'>" + row.name + "</td><td align='right'><font style='color: #009933; font-family: 黑体; font-style: italic'>" + row.py + "</font>  </td></tr></table>";

                },
                formatMatch: function (row, i, max) {
                    return row.name+row.py;//对此字符进行搜索
                },
                formatResult: function (row) {
                    return row.name;//返回文本框的列
                }
            }).result(function (event, row, formatted) {
                alert(row.id);//执行返回值操作
            }); 
 

        })

      
    </script>
</head>
<body>
    <form id="form1"  > <input id="areaname"  />
   
    </form>
</body>
</html>