jQuery 插件未从 AJAX 返回的 JSON 返回结果

Question

所以我使用这个 jQuery 插件： jSuggest
这是基于这个插件的： autoSuggest

这是一个带有（工作）演示的 jsFiddle jSuggest 的： demo

这是我用来在我的页面上实例化插件的代码：

<form id="add" action="components/AddItem.php" method="post" enctype="multipart/form-data" class="center clear">
            <fieldset>
                <legend>Basic Information</legend>
                <label for="name">Name</label>
                <br />
                <input type="text" name="name" id="name"/>
                ...[snip]...
        </form>

。

$( '#name' ).jSuggest({
                        source: "components/suggItem.php",
                        selectedItemProp: "name",
                        seekVal: "name",
                        selectionLimit: 1,
                        uniqID: "item",
                        keyDelay: 100,
                        newText: "You must click outside the text box to add a new item."
                        });

这是当我在文本框中输入“ch”时从 "components/suggItem.php" 返回的字符串：

[ {"value":"1","name":"Cheeseburger "},{"value":"3","name":"Fish Sandwich"} ]

（这是 Content-type: application/json 我从 FireBug 获取它）

但是，我曾经在下拉列表中得到的唯一内容是“未找到结果”。任何人都可以找到我的代码中的错误吗？

我也尝试过：

$( '#name' ).jSuggest({
                        source: "components/suggItem.php",
                        seekVal: "name",
                        });

以及“value”和“name”的各种组合。

我不明白为什么这不起作用。有什么帮助吗？

Answer 1

该插件可能有其优点，但作者似乎对 AJAX 的工作方式存在严重误解。这里的代码：

        // If the data is a URL, retrieve the results from it. Else, the data is an object, retrieve the results directly from the source.
        if (dType === 'string'){

          // Set up the limit of the query.
          var limit = qLimit ? "&limit="+encodeURIComponent(qLimit) : '';

          // Build the query and retrieve the response in JSON format.
          $.getJSON(theData+"?"+opts.queryParam+"="+encodeURIComponent(string)+limit+opts.extraParams, function(rData){ theData = rData; });

        }

        // Call the custom retrieveComplete function.
        theData = opts.retrieveComplete.call(this, theData);

似乎对我来说假设“getJSON”调用将同步调用函数参数，这样变量“theData”将在执行最后一行（显示的）代码之前更新。然而，事实并非如此，“theData”是驱动整个自动完成机制的关键对象。

原始代码（“autoSuggest”插件似乎是“jSuggest”的前身）看起来与该代码截然不同，并且它正确地将 ajax 调用返回的 JSON 数据的解释推迟到处理程序例程。

Answer 2

  $( '#name' ).jSuggest({source: "components/suggItem.php",                              
selectedItemProp: "name", 
seekVal: "name"  
 });

它的工作需要所有这三个属性。通过直接向源属性传递一个数组而不是 url 来验证它是否有效，然后尝试该 url。