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

最新推荐文章于 2024-07-29 07:45:00 发布

tracy_n

最新推荐文章于 2024-07-29 07:45:00 发布

阅读量1.3w

点赞数 5

分类专栏：前端文章标签： jquery bootstrap 搜索

本文链接：https://blog.csdn.net/tracy_n/article/details/72657456

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

最近在项目中要用到搜索框自动提示的功能，看了之前另一个人写到一半的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>