jquery只能输入数字-jQuery实现用户输入的手动补全功能

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

借助jQueryUI中的Auto-complete插件，实现输入手动补全功能。 当您使用网店、京东等电商平台搜索商品时，往往只需要输入商品的一些特殊字符jquery只能输入数字，就可以显示与这些字符类似的列表菜单。 用户可以使用键盘或者方向键快速选择，实现了非常好的用户体验。

1、最简单的用户输入是手动完成的

    
    
    
    
    
    
        $(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
            });
        });
    


    

        请输入:
        
    

复制

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

Auto-complete插件不仅可以实现本地数据源的手动补全jquery只能输入数字，还可以读取远程数据源，例如从服务器读取数据源信息。 通过将服务器数据缓存到浏览器中，首先将获取到的数据源保存在缓存变量中。

$(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);
            });
        }
    });
});

复制

最终效果和天猫里的一样：