0

几年来，我一直在使用一个 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/

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

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

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

感谢您的任何提示和建议。

4

3 回答 3

3

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

http://jqueryui.com/autocomplete/

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

于 2012-11-02T11:12:13.263 回答
0

以下是我使用 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 );
};

这是一个有用的链接

于 2017-07-26T21:45:55.660 回答
0

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

$('.ui-autocomplete').css('max-width','25%');
于 2017-07-26T22:16:05.237 回答