狂码一生_优质编程技术资源与您共享

狂码一生_优质编程技术资源与您共享

狂码一生技术博客站主要是以优质编程技术资源共享为核心,以交流学习为目的搭建的在线平台。我们共享一些优质的资源出来,供同行业的同胞交流与学习,让彼此之间在自身的技术上得到提升,本站主要提供程序方面的资源给大家,像PHP,C++,Javascript,html,asp.net,数据库等等方面的资源,本站计划将在后期会不断完善,建设更多类目的资源,希望能得到更多同行的支持!

jQuery实现用户输入自动完成功能

利用jQuery UI中Auto-complete插件实现输入自动完成功能,大家在使用诸如淘宝、京东等电商平台搜索商品时,往往只要输入商品的一些特殊字符,就可以显示出和该字符相近的列表菜单,用户使用鼠标或者键盘方向键就可以快速选择,实现了很好的用户体验。

1.最简单的用户输入自动完成

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>jQuery UI Autocomplete - Default functionality</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script>
        $(function() {
            //定义并初始化字典库数据源集合
            var availableTags = [
              "ActionScript", 
              "AppleScript", 
              "Asp", 
              "BASIC", 
              "C", 
              "C++", 
              "Clojure", 
              "COBOL", 
              "ColdFusion", 
              "Erlang", 
              "Fortran", 
              "Groovy", 
              "Haskell", 
              "Java", 
              "JavaScript", 
              "Lisp", 
              "Perl", 
              "PHP", 
              "Python", 
              "Ruby", 
              "Scala", 
              "Scheme"];
            //自动完成插件函数
            $("#tags").autocomplete({
                //自动完成字典库数据源
                source: availableTags
            });
        });
    </script>
</head>

<body>
    <div>
        <label for="tags">请输入:</label>
        <input id="tags">
    </div>
</body>

</html>

2 使用远程数据源自动完成

Auto-complete插件不光可以实现本地数据源的自动完成,也可以读取远程的数据源,列如实现从服务器端读取数据源信息。
通过将服务器数据缓存到浏览器中,获取的数据源首先保存在cache变量中。

$(function() {
    //自定义缓存变量
    var cache = {};
    //自动完成插件函数
    $("#tags").autocomplete({
        //定义用户最少输入的字符数
        minLenght: 2,
        source: function(request, response) { //定义远程获取数据源函数
            var term = request.term; //定义用户请求信息变量
            if (term in cache) { //判断请求数据是否存在缓存中
                response(cache[term]); //真,从缓存中读取数据
                return;
            }
            $.getJSON('data.json', request, function(data, Status, xhr) {
                cache[term] = data.result; //缓存远程数据
                response(data.result);
            });
        }
    });
});


最后完成的效果和下面淘宝中的一样:

版权声明: 源文来自博客园,点击这里查看源文!
[若此文确切存在侵权,请联系本站管理员进行删除!]

评论