Question

我正在研究jquery中的自动完成，似乎只找到字母“C”。并想出为什么会发生这种情况？我使用json feed的另一个自动完成工作正常，但是这个需要显示一个排序网格，您可以从第一列信息（形状）中进行选择。当我输入“C”时，我得到了下拉，但除此之外的任何组合都不起作用。此外，如果你只输入“L”或“A”，它应该弹出一个选择，但没有这样的运气

JSON

[
    {
        "shape":"CLRE1 LAS",
        "eye":"50",
        "bridge":"18",
        "color":"all"
    },
    {
        "shape":"CLRE2 LAS",
        "eye":"48",
        "bridge":"18",
        "color":"all"
    },
    {
        "shape":"CLRK UOC",
        "eye":"54",
        "bridge":"18",
        "color":"all"
    },
    {
        "shape":"ABCD KCT",
        "eye":"105",
        "bridge":"25",
        "color":"all"
    }
]

Jquery代码

$.getJSON("resources/data/frameshape.json", function(projects) 
        {

        $( "#frameShaping" ).autocomplete({
            source: projects,
            select: function( event, ui ) {
                $( "#frameShaping" ).val( ui.item.shape );
                return false;
            }
        })

        .data( "autocomplete" )._renderItem = function( ul, item ) {

            if (ul.children().length == 0){
                    ul.append( '<li class="t2"><p class="testing">Shape</p>
                    <p class="testing">Eye</p><p class="testing">Bridge</p>
                    <p class="testing">Color<p></li>' );
            }//end if

            return $( "<li></li>" )
                .data( "item.autocomplete", item )
                .append( "<a><p class='linkage'>" 
                    + item.shape + "</p><p class='linkage'>" 
                    + item.eye + " </p><p class='linkage'>" 
                    + item.bridge + "</p><p class='linkage'> " + 
                    item.color +"</p></a>" )
                .appendTo( ul );

        };
    });

HTML

<input id="frameShaping" size="25"/>

Answer 1

自动填充需要一个包含 label 属性， value 属性或两者的对象的数组。为了使其正常工作，所要做的就是将其中一个属性添加到数组中的对象中：

$.getJSON("resources/data/frameshape.json", function(projects) {
    $.each(projects, function (i, project) {
        project.label = project.shape;
    });

    $("#frameShaping").autocomplete({
        source: projects,
        /* other options */
    });
});

示例： http://jsfiddle.net/gUEjn/（显然没有AJAX调用）。

另一种选择是通过source选项提供您自己的过滤逻辑（如果您不想为源对象添加额外的属性，这将非常有用）。基本上，您可以提供一个接受请求对象和响应回调的函数，并在函数内部执行您想要的任何过滤：

$("#frameShaping").autocomplete({
    source: function (request, response) {
        /* this is also how jQueryUI builds a regex to find candidates internally */
        var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");

        response($.grep(projects, function (value) {
            return matcher.test(value.shape);
        }));
    },
    /* etc. */
})

示例： http://jsfiddle.net/P2WF9/

我建议使用第二个选项，因为它不需要您在初始化窗口小部件之前额外迭代源数组。

至于为什么它总是使用“C”的输入，它实际上适用于字符串中的任何字符：“[object Object]”

这是因为under the hood，jQueryUI是：

根据您输入的输入（例如“C”）构建正则表达式
使用RegEx对象的test方法（接受字符串）

现在，当您将任何内容传递给test方法时，根据toString的ECMAScript规范，参数将使用RegExp.test转换为字符串。

因此，在这种特殊情况下，当您使用其中一个对象并在其上调用toString时，您会得到{C}匹配的[object Object]。由于对于数组中的每个对象都是如此，如果搜索任何这些字符，实际上会将每个项目都恢复。

以下是发生的事情的简要示例： http://jsfiddle.net/ZnA2w/

Jquery自动完成只找到“C”

1 个答案: