如何告诉 jquery 自动完成每行显示一项而不是一行中的整个返回值？

Posted 2023-05-08

【中文标题】如何告诉 jquery 自动完成每行显示一项而不是一行中的整个返回值？

【英文标题】：How do I tell jquery autocomplete to display one item per line instead of the entire return value in one line?

【发布时间】：2018-07-09 13:27:47

【问题描述】：

我正在使用带有 JQuery UI 自动完成功能的 Rails 5。我正在使用 AJAX 为我的文本框获取适当的建议...

$(function() 
  return $('#s').autocomplete(
    source: function (request, response) 
        $.get("/people/search.js", 
            s: request.term
        , function (responseStr) 
            data = eval(responseStr);
            // assuming data is a javascript array such as
            // ["value": "SpongeyB", "label": "some label" , "value": "SpongeyB", "label": "some label" ...]
            // and not a string
            var jsonData = new Array();
            data.forEach(function (item) 
              var jsonItem = new Object();
              jsonItem.value = item;
              jsonItem.label = item;
              var myString = JSON.stringify(jsonItem);
              jsonData.push( myString );
            );
            response(jsonData);
        );
    
  );
);

但是，当我输入内容时，我的文本框下出现的不是选项列表，而是整个 jsonData 作为字符串...

如何告诉自动完成功能将 JSON 列表中的每个项目显示在其自己的行上而不是整个 JSON 字符串上？

编辑：响应给出的答案，我改变了我的行

jsonData.push( myString );

到

jsonData.push( jsonItem );

但我仍然只得到一行包含出现在我的文本框下的所有项目...

【问题讨论】：

Convert a JavaScript object into a string with JSON.stringify().。我认为这不是您需要或打算做的。我很惊讶responseStr 实际上是一个字符串而不是一个 js 对象。我假设您已经尝试将data 原封不动地传递给response？

没错。我原封不动地传递了字符串，然后被告知我需要将响应更改为 JSON 格式——***.com/questions/48513462/…。也许我太快接受了答案？

【参考方案1】：

根据 function 下 source 下的docs（这就是您正在执行的操作）：

(data) 可以是上述用于简单本地数据的任何格式。

简单的本地数据状态：

支持的格式有两种：

字符串数组：[ "Choice1", "Choice2" ]​​i> 具有标签和值属性的对象数组：[ label: "Choice1", value: "value1" , ... ]​​i>

这两件事你都没有做。

经过下面的讨论，结果表明来自服务器的响应是一个表示字符串数组的字符串。

在做：

$(function() 
  return $('#s').autocomplete(
    source: function (request, response) 
        $.get("/people/search.js", 
            s: request.term
        , function (responseStr) 
            data = JSON.parse(responseStr);
            response(data);
        );
    
  );
);

成功了。

【讨论】：

嗨，我把我的行改为“jsonData.push(jsonItem);”这样我就返回了一个 json 对象数组，如您的第二个要点所示，但我的文本框下仍然只有一个项目，所有项目都压缩到其中。我编辑了我的问题以显示正在发生的事情。

responseStr 在你对它做任何事情之前是什么？

它是 -- ["SpongeyB","SpongeyBob","SpongeyBob2","SpongeyBob23","SpongeyBob24"]

那么你为什么不只是做response(responseStr) 什么都不做，因为它已经是一个字符串数组——这正是你所需要的。顺便说一句，当变量不是字符串时，命名为 responseStr 似乎不好，它是一个数组。

因为当我这样做时，我得到了一个错误 - ***.com/questions/48513462/…，更重要的是因为没有阅读文档而被指责（即使我这样做了！）。