（jquery？）自动完成以两行或多行显示？答案

【问题标题】：(jquery?) Autocomplete for display in two or more lines?（jquery？）自动完成以两行或多行显示？
【发布时间】：2025-12-16 15:25:01
【问题描述】：

几年来，我一直在使用一个 ajax 自动完成脚本，它会为搜索提供预选的关键字。现在，我想扩展它以实际显示（数据）变量的名称，但是可以扩展到 100 个字符。因此，结果需要在下拉框中以多行（至少两行）显示。

我找到了一个 jquery 自动完成插件：http://code.drewwilson.com/entry/autosuggest-jquery-plugin。

还有这个：http://www.web2ajax.fr/2008/02/03/facebook-like-jquery-and-autosuggest-search-engine/

否则，那里没有太多东西，这是我的印象。

还有另一个挑战：我希望自动完成功能不仅可以搜索名称的开头，还可以搜索字段的任何部分。（我猜，这是服务器端的事情，对吧？）

您能推荐任何稳定且不太花哨的解决方案吗？

感谢任何提示和建议。

【问题讨论】：

标签： jquery autocomplete lines

【解决方案1】：

jQuery 本身有自动完成小部件。它会像你期望的那样工作。检查此链接。

http://jqueryui.com/autocomplete/

http://jqfaq.com/category/widgets/autocomplete/

【讨论】：

谢谢。是的，我知道那个。但我还没有看到任何使用 jQuery-autocomplete 并且能够以多行显示下拉列表的示例。
检查此链接。我想这会对你有所帮助。 forum.jquery.com/topic/using-html-in-autocomplete *.com/questions/7180246/…

【解决方案2】：

这是我使用 jquery ui 的 _renderItem 方法的方法：请注意，我必须将一个长段落分成宽度为 50 个字符的行。

$("#id_info").autocomplete({
    source: function(request, response) {
        $.ajax({
            type: "POST",
            url: "/api",
            contentType: "application/json; charset=utf-8",
            headers: {'X-CSRFToken': '{{ csrf_token }}'},
            timeout: 5000,
            data: JSON.stringify({
                term: request.term,
                task: 'search',
            }),
            success: response,
            dataType: 'json',
        });

    },
    minLength: 0,
    select: function(event, ui) {
        ui.item.value = ui.item.id;
    }
}).autocomplete( "instance" )._renderItem = function( ul, item ) {
  var width = 50; // num of characters
  var broken_para = '';
  var pre_ind = 0;
  var ind = item.label.indexOf(' ', width);
  while(ind > 0){
    broken_para = broken_para + '<br>' + item.label.substring(pre_ind, ind);
    pre_ind = ind;
    ind = item.label.indexOf(' ', ind + width);
  }
  broken_para = broken_para + '<br>';

  return $( "<li>" )
    .append(broken_para)
    .appendTo( ul );
};

这是useful link

【讨论】：

【解决方案3】：

我发现了一个简单的解决方案：

$('.ui-autocomplete').css('max-width','25%');

【讨论】：