Question

有一个非常好的演示。 http://jsfiddle.net/salman/VaKfP/

但是我在跟踪采样代码时遇到了一些问题。

<script>
var js = '<?php echo $json; ?>';
console.log(typeof js);
$(document).ready(function() {
    var arr = jQuery.parseJSON(js);

    //local = [{value:1, label: "c++"},{value:2, label: "java"},{value:3, label: "ruby"},{value:4, label: "rubyonrails"}];

    $("#nominee_input").autocomplete({
          source: arr,
          focus: function(event, ui){
                 $('#nominee_input').val(ui.item.name);
                 return false;
          },
          select: function(event, ui){
                 $('#nominee_input').val(ui.item.name);
                 $('#hidden').val(ui.item.uid);
                 return false;
          }
    });

    $('#submit').click(function(){
          alert($('#hidden').val());
    });

});
</script>

$ json变量是JSON类型，其格式如下：[Object {uid =“11443624”，name =“angela”}，Object {uid =“21503235”，name =“Sunny Lee”}。< / p>

如果我将源更改为本地，则效果非常好。但是当我使用 arr 作为源时，它不起作用。

需要你的帮助。感谢。

Answer 1

来自documentation：

本地数据可以是一个简单的字符串数组，也可以包含数组中每个项目的对象，带有标签或值财产或两者

autocomplete插件需要一个具有以下属性的对象数组：标签或/和值

您的变量js不适用于此：

语法不正确。应以这种方式定义对象数组：[{key1: 'key1', key2: 'key2'}, ...]
你不能使用$ .parseJSON（），因为它不是一个json对象而是一个数组。只需输出你的PHP：
```
var js = <?php echo $json; ?>; // $json being [{uid:"11443624",name:"angela"},...]
```

当自动填充功能根据输入进行搜索时，它会使用source选项。在内部，插件实际上期望source选项是要执行的函数。诀窍在于，当您指定数组或URL时，插件会在其周围创建一个包装器以便能够使用它（请参阅此answer）。

如果您有自定义数据源，则可以将source选项作为预期函数传递给自己。它的形式为：

source: function(request, response) { ... }

请求参数包含一个属性request.term，它是输入中输入的文本，响应参数是显示带有建议的菜单的函数。像这样使用它：

$("#nominee_input").autocomplete({
    source: function(request, response) {

        // $.map() builds an array understandable by autocomplete
        // $.ui.autocomplete.filter() will filter the array based on the request.term
        var filteredData = $.ui.autocomplete.filter($.map(arr, function(item) {
            return {
                value: item.name,
                label: item.name,
                uid: item.uid
            };
        }), request.term);

        // use the response callback to display the results
        response(filteredData);

    }
});

演示jsfiddle

当您拥有特定数据源（具有除标签和值之外的其他属性）时，您可能不会以自定义方式显示结果。为此，您无法覆盖自动完成插件的默认_renderItem方法：

$("#nominee_input").autocomplete({ ... })
    .data("autocomplete")
    ._renderItem = function( ul, item ) {
       return $( "<li></li>" )
           .data( "item.autocomplete", item )
           .append( $('<a>' + item.label + ' - ' + item.uid  + '</a>')
                          .attr('data-uid', item.uid)
           )
           .appendTo( ul );
    };

Answer 2

$.parseJSON返回一个对象，但看起来自动完成使用source参数的数组。您是否尝试过直接使用js的{{1}}变量？

Answer 3

你试过吗

$("#nominee_input").autocomplete({
    source: <?php echo $json; ?>, /* without '' ! */
    ...

你能写出什么＆＃34; echo $ json＆＃34;写的确切吗？

Answer 4

如果arr变量格式确实是[{ uid="11443624", name="angela"}]，那么=就是您的问题。确保您的php正确格式化对象。如果格式正确，则不需要在其上运行parseJSON。 php输出应使用标签/值对进行格式化，就像在本地示例{value:1, label: "c++"}中一样。自动填充不会识别uid /名称对，除非您按照the ui example覆盖了renderItem方法。

$( "#project" ).autocomplete({
            minLength: 0,
            source: projects,
            focus: function( event, ui ) {
                $( "#project" ).val( ui.item.label );
                return false;
            },
            select: function( event, ui ) {
                $( "#project" ).val( ui.item.label );
                $( "#project-id" ).val( ui.item.value );
                $( "#project-description" ).html( ui.item.desc );
                $( "#project-icon" ).attr( "src", "images/" + ui.item.icon );

                return false;
            }
        })
        .data( "autocomplete" )._renderItem = function( ul, item ) {
            return $( "<li></li>" )
                .data( "item.autocomplete", item )
                .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
                .appendTo( ul );
        };

jQuery自动完成获取id

4 个答案: