1

我正在处理 jquery 中的自动完成功能，似乎只能找到字母“C”。并知道为什么会发生这种情况？我使用 json 提要的另一个自动完成工作正常，但这个需要显示一个排序网格，您可以从第一列信息（形状）中进行选择。当我输入“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"/>
4

1 回答 1

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]”

这是因为在引擎盖下，jQueryUI 是：

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

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

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

这是正在发生的事情的一个简化示例：http: //jsfiddle.net/ZnA2w/

于 2012-05-24T02:33:24.523 回答