来自JSON数组的Jquery自动完成代码

时间：2014-09-05 19:03:20

标签： jquery json autocomplete

我正在尝试为表单编写自定义自动填充片段，一旦开始输入，建议就会显示在输入字段下。当您键入选项时，会越来越具体。这些选项由JSON数组提供，由mysql查询动态创建到数据库。

单击其中一个列出的选项后，单击操作应使用列表中单击元素的值填充输入值。

出于某种原因，我似乎在选项列表上遇到了点击jquery操作的问题。

有人可以看一下这个源代码并帮我弄清楚它为什么不起作用？

我在jsfiddle.net上创建了这个的简化版本并且它工作了，一旦我把完整的代码放在那里它就会破坏！。

+++++++++++++++++++++++++++ 

    <html>
    <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
    var partsArray = [
    {"label": "0030200-08"}, 
    {"label": "005-2060-6"}, 
    {"label": "005-2063-5"}, 
    {"label": "005-2067-1"}, 
    {"label": "005-2078-3"}, 
    {"label": "005-2119-8"}, 
    {"label": "0062260-16"}, 
    {"label": "007-0026-0"}, 
    {"label": "007-0028-0"}, 
    {"label": "007-0030-0"}, 
    {"label": "007-0031-0"}, 
    {"label": "007-0032-0"}, 
    {"label": "007-0033-0"}, 
    {"label": "007-0035-0"}, 
    {"label": "007-0036-0"}, 
    {"label": "007-0038-0"}, 
    {"label": "007-0039-0"}, 
    {"label": "007-0039-0"}, 
    {"label": "007-0050-0"}, 
    {"label": "007-0051-0"}, 
    {"label": "012-5060-0"}, 
    {"label": "017-0035-0"}, 
    {"label": "017-0041-0"}, 
    {"label": "017-0042-0"}, 
    {"label": "017-0074-0"}, 
    {"label": "019-2055-1"}, 
    {"label": "019-2084-3"}, 
    {"label": "019-2084-6"}, 
    {"label": "019-2099-0"}, 
    {"label": "019-2102-0"}, 
    {"label": "019-2129-2"}, 
    {"label": "019-2151-0"}, 
    {"label": "019-2239-0"}, 
    {"label": "019-2306-0"}, 
    {"label": "019-2313-6"}, 
    {"label": "019-2539-0"}, 
    {"label": "019-3124-0"}, 
    {"label": "019-5065-0"}, 
    {"label": "019-6006-0"}, 
    {"label": "019-6019-0"}, 
    {"label": "019-7042-0"}, 
    {"label": "019-7072-0"}, 
    {"label": "019-7089-0"}, 
    {"label": "019-8040-0"}, 
    {"label": "019-8040-0"}, 
    {"label": "019-8040-0"}, 
    {"label": "019-8040-0"}, 
    {"label": "019-8040-0"}, 
    {"label": "019-8040-0"}, 
    {"label": "019-8046-0"}, 
    {"label": "019-8072-0"}, 
    {"label": "019-8073-0"}, 
    {"label": "019-8074-0"}, 
    {"label": "019-8078-0"}, 
    {"label": "019-8093-0"}, 
    {"label": "019-8094-0"}, 
    {"label": "019-8095-0"}, 
    {"label": "019-8101-0"}, 
    {"label": "023-0115-0"}, 
    {"label": "023-0122-0"}, 
    {"label": "026-0018-0"}, 
    {"label": "029-0006-0"}, 
    {"label": "029-0022-0"}, 
    {"label": "029-0097-0"}, 
    {"label": "029-0286-0"}, 
    {"label": "029-0339-0"}, 
    {"label": "029-0352-0"}, 
    {"label": "029-0362-0"}, 
    {"label": "029-0407-0"}, 
    {"label": "029-0461-0"}, 
    {"label": "029-0463-0"}, 
    {"label": "029-0681-0"}, 
    {"label": "030-0035-0"}, 
    {"label": "030-1045-2"}, 
    {"label": "030-1046-0"}, 
    {"label": "030-1107-3"}, 
    {"label": "030-2002-0"}, 
    {"label": "030-2227-2"}, 
    {"label": "030-2248-0"}, 
    {"label": "030-2295-0"}, 
    {"label": "030-2367-0"}, 
    {"label": "030-2705-0"}, 
    {"label": "031-0105-0"}, 
    {"label": "031-0106-0"}, 
    {"label": "031-0112-2"}, 
    ];
    </script>
    <style>
    li{
    list-style-type: none;
    color: #888;
    }
    li:hover{
    color: #000;
    font-weight: bold;
    cursor: pointer;
    text-decoration: underline;
    }
    .suggestions{
    display: block;
    position: relative;
    width: 120px;
    height: auto;
    border: 1px solid #aaa;
    background: #CCC;
    left: 3px;
    }
    </style>
    </head>
    <body>
    <input type="text" name="InputSpace" id="inputSpace">
        <div class="suggestionsContainer">
            <ul class="list">
        <div class="suggestions">
        </div>
            </ul>
        </div>
    <script>
    var typed;
    var a = 1;
    $("#inputSpace").keyup(function(){
        typed = $("#inputSpace").val();
            for(var x = 0; x < partsArray.length; x++){
                if(partsArray[x].label.substring(0,a) == typed){
                    $(".suggestions").append("<li name='"+partsArray[x].label+"'>"+partsArray[x].label+"</li>");
                }
                    else
                {
                    continue;
                }
             }
             a=a+1;
        });

    $("input").keypress(function(){
        $(".suggestions").html("");
    });


        $(".list li").click(function(){
            var number=$(this).attr("name");
            $("input").val(number);
        });
    </script>
    </body>
    </html>

3 个答案:

答案 0 :(得分：1)

        $(".list li").click(function(){
        var= number=$(this).attr("name");
        $("input").val(number);

在上面的行中，您添加了var = number = ...。我想你应该按照以下方式写出来，

 var number=$(this).attr("name");

删除＆＃34; =＆＃34;在＆＃39; var＆＃39;之间签名和＆＃39;数字＆＃39;。

可能是，它可以解决您的问题。

答案 1 :(得分：0)

我修改了我的答案。我对你的代码做了一些小的风格调整。最重要的是，我替换了jQuery的CDN版本，因为它抛出了一个错误。我在本地进行了测试，效果很好。永远记得在浏览器开发工具中检查控制台。

<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
    var partsArray = [
            {"label": "0030200-08"}, 
            {"label": "005-2060-6"}, 
            {"label": "005-2063-5"}, 
            {"label": "005-2067-1"}, 
            {"label": "005-2078-3"}, 
            {"label": "005-2119-8"}, 
            {"label": "0062260-16"}, 
            {"label": "007-0026-0"}, 
            {"label": "007-0028-0"}, 
            {"label": "007-0030-0"}, 
            {"label": "007-0031-0"}, 
            {"label": "007-0032-0"}, 
            {"label": "007-0033-0"}, 
            {"label": "007-0035-0"}, 
            {"label": "007-0036-0"}, 
            {"label": "007-0038-0"}, 
            {"label": "007-0039-0"}, 
            {"label": "007-0039-0"}, 
            {"label": "007-0050-0"}, 
            {"label": "007-0051-0"}, 
            {"label": "012-5060-0"}, 
            {"label": "017-0035-0"}, 
            {"label": "017-0041-0"}, 
            {"label": "017-0042-0"}, 
            {"label": "017-0074-0"}, 
            {"label": "019-2055-1"}, 
            {"label": "019-2084-3"}, 
            {"label": "019-2084-6"}, 
            {"label": "019-2099-0"}, 
            {"label": "019-2102-0"}, 
            {"label": "019-2129-2"}, 
            {"label": "019-2151-0"}, 
            {"label": "019-2239-0"}, 
            {"label": "019-2306-0"}, 
            {"label": "019-2313-6"}, 
            {"label": "019-2539-0"}, 
            {"label": "019-3124-0"}, 
            {"label": "019-5065-0"}, 
            {"label": "019-6006-0"}, 
            {"label": "019-6019-0"}, 
            {"label": "019-7042-0"}, 
            {"label": "019-7072-0"}, 
            {"label": "019-7089-0"}, 
            {"label": "019-8040-0"}, 
            {"label": "019-8040-0"}, 
            {"label": "019-8040-0"}, 
            {"label": "019-8040-0"}, 
            {"label": "019-8040-0"}, 
            {"label": "019-8040-0"}, 
            {"label": "019-8046-0"}, 
            {"label": "019-8072-0"}, 
            {"label": "019-8073-0"}, 
            {"label": "019-8074-0"}, 
            {"label": "019-8078-0"}, 
            {"label": "019-8093-0"}, 
            {"label": "019-8094-0"}, 
            {"label": "019-8095-0"}, 
            {"label": "019-8101-0"}, 
            {"label": "023-0115-0"}, 
            {"label": "023-0122-0"}, 
            {"label": "026-0018-0"}, 
            {"label": "029-0006-0"}, 
            {"label": "029-0022-0"}, 
            {"label": "029-0097-0"}, 
            {"label": "029-0286-0"}, 
            {"label": "029-0339-0"}, 
            {"label": "029-0352-0"}, 
            {"label": "029-0362-0"}, 
            {"label": "029-0407-0"}, 
            {"label": "029-0461-0"}, 
            {"label": "029-0463-0"}, 
            {"label": "029-0681-0"}, 
            {"label": "030-0035-0"}, 
            {"label": "030-1045-2"}, 
            {"label": "030-1046-0"}, 
            {"label": "030-1107-3"}, 
            {"label": "030-2002-0"}, 
            {"label": "030-2227-2"}, 
            {"label": "030-2248-0"}, 
            {"label": "030-2295-0"}, 
            {"label": "030-2367-0"}, 
            {"label": "030-2705-0"}, 
            {"label": "031-0105-0"}, 
            {"label": "031-0106-0"}, 
            {"label": "031-0112-2"}, 
    ];

    var typed;
    var a = 1;

    $("#inputSpace").keyup(function(){

            typed = $("#inputSpace").val();

            var i = 0;
            for(var x = 0; x < partsArray.length; x++){

                    if ( partsArray[x].label.substring(0,a) == typed ) {
                            $(".suggestions").append("<li name='"+partsArray[i].label+"'>"+partsArray[x].label+"</li>");
                    }

            }
            i++;
            a=a+1;

    });

    $("input").keypress(function(){
            $(".suggestions").html("");
    });

    $(".list").on( "click", "li", function() {
        var indexNum = $(this).attr("name");
        $("#inputSpace").val(indexNum);
    });

</script>
</body>
</html>

答案 2 :(得分：0)

所以...经过这么多试验和错误......我想出来了！

答案取决于在建议类中嵌套li的新函数。

$(".suggestions").click(function(){
    $("li").click(function(){
        var name = $(this).html();
        $("#inputSpace").val(name);
    })
});

这在交换中获取列表项的值并用它替换输入值。!!

多么头疼！但它就是!!!感谢大家的建议和帮助！

相关问题
最新问题