jQuery自动完成获取ID

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"} ]。

如果我将源更改为 本地，它会很好地工作。但是当我使用 arr 作为源时它不起作用。

需要你的帮助。谢谢。

Answer 1

来自documentation：

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

自动完成插件需要一个具有以下属性的对象数组作为源：label 或/和 value

你的变量js不适合这个：

1. 语法不正确。对象数组应该这样定义：[{key1: 'key1', key2: 'key2'}, ...]

2. 你不能使用 $.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

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

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

Answer 3

$.parseJSON 返回一个对象，但看起来自动完成功能使用数组作为 source 参数。您是否尝试过将js 变量直接用于source？

Answer 4

你试过了吗

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

?

你能写出“echo $json”到底写了什么吗？