bootstrap用 juqery Autocomplete组件实现搜索框自动提示

来源：互联网发布：摩天手无线鼠标知乎编辑：程序博客网时间：2024/05/17 02:42

最近在项目中要用到搜索框自动提示的功能，看了之前另一个人写到一半的js，惨不忍睹，连我这种渣渣js水平都要吐槽他。于是自己查阅了一些博客实现了，不过是在公司的框架上实现的，自己后来又想在bootstrap的基础上实现，又写了一个小小demo，这里记录一下。

1.功能实现主要思路

首先，实现搜索框输入时自动提示，使用的一个关键是jquery中的keyup,我们来看看keyup函数在手册中的介绍

定义和用法完整的 key press 过程分为两个部分，按键被按下，然后按键被松开并复位。当按钮被松开时，发生 keyup 事件。它发生在当前获得焦点的元素上。keyup() 方法触发 keyup 事件，或规定当发生 keyup 事件时运行的函数。注释：如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生。

个人对这段话的理解是按下键盘又松开也就是输入过程中就会触发keyup，所以对应到搜索框就是在搜索框输入的时候触发keyup，在具体触发代码里面添加ajax请求访问搜索接口获取搜索结果集动态显示就可以了。

所以整个代码流程就是对搜索框的keyup事件进行监听，动态获取搜索结果集，显示在前端。知道了怎么触发自动提示，下面就是代码实现。

2.代码以及解释

先放一下代码：

<!DOCTYPE html><html><head>    <title>搜索输入框demo</title>    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">    <style type="text/css">      .ui-com {        font-size: 14px;        max-height: 100px;        max-width: 172px;        overflow-y: auto;        /* 防止水平滚动条 */        overflow-x: hidden;      }    </style>      <script src="//code.jquery.com/jquery-1.10.2.js"></script>      <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>  </head><body><!-- input id="search_kw" type="text" name="myname" class="ui-autocomplete"></input>  --><nav class="navbar navbar-default" role="navigation">    <div class="container-fluid">     <div class="navbar-header">        <a class="navbar-brand" href="#">搜索自动提示</a>    </div>    <div class="navform">        <form class="navbar-form navbar-left" role="search">                   <input id="search_kw" type="text" name="myname" class="form-control ui-com"  placeholder="请输入基金关键字">        </form>    </div>    </div></nav></body><script type="text/javascript">$(document).ready(function () {      (function(){          var insertOptions = function(data, id) {              var result = new Array();              $.each(data, function(i, item){                  result.push(item.short_name);              });              //alert(result.toString());             console.log(result.toString());            $('#search_kw').autocomplete({                  source: result              });          }          $('#search_kw').keyup(function(){              var right_id = "search_kw";              var url = "http://.....";              var skeyword = $("#search_kw").val();                $.ajax({                    url: url,                    dataType: 'jsonp',                    jsonp: "callback",                    data: {"skeyword": skeyword},                    success: function (data) {                        insertOptions(data, right_id);                    }                });        });      })();  });  </script></html>

首先，引入boostrap,jquery和jquery-ui组件,注意顺序,jquery在bootstrap前引入,jquery-ui最后。

这里提示下拉显示用$(‘#search_kw’).autocomplete({ source: result }); 这句话来实现，在jquery-ui里面已经封装好实现方法，直接调用就行啦,source参数这里放入结果集。

当然，也可以自己试着实现下拉显示，大概就是将结果集用li拼接，然后显示，这里涉及到ul和搜索框相对位置的设置，笔者在bootstrap下设置相对位置总是失败，可能是和bootstrap的css冲突了，后面如果解决再放出来。

最后来一张效果图：

阅读全文

2 0