Question

您好我有搜索建议文本框的搜索应用程序（基本上是自动完成），

UI自动填充数据来自远程solr主机.i能够获取数据并将其显示在下拉列表中，没有任何问题。

问题是我想将我的下拉列表格式化为html自定义数据。这样它就会显示一些信息的用户图像。

我的代码如下：

$( "#user" ).autocomplete({
  source: function( request, response ) {
    $.ajax({
      url: "http://mysolrhot:port/?json.wrg=?",
      dataType: "jsonp",
      data: {
        q: request.term,
        wt: "json",
        Rows: 12,
        start:0,
      },
      success: function( data ) {
        response(
          $.map(data.reponse.docs, function(item) {
            return {
              label: item.name+ 
              value: item.name
            }
          })
        );
      }
    });
  },
  minLength: 2,
  select: function( event, ui ) {

  }
});

以上代码仅在UI下拉列表中显示文本信息。在这里，我想要自定义html输出。对于我已尝试使用以下代码

.data( "autocomplete" )._renderItem = function( ul, item ) {

  return $("<li><li>")
    .data( "item.autocomplete", item )
    .append( "<a>" + item.name + "<br>" + item.country + "</a>" )
    .appendTo( ul );

};

我赞扬上述自动完成中对成功函数（）的响应（）阻止。因为._renderItem将处理下拉列表。

问题是，当我开始在文本框中输入时，什么都不会发生。请求成功但下拉列表不会出现。在javascript控制台中，他们也没有错误。

我使用的Jquery如下：

        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
        <script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.2.js" type="text/javascript"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/i18n/jquery-ui-i18n.min.js" type="text/javascript"></script>

任何plz可以帮助这里的错误。如果版本是问题。请告诉我工作版本...... PLZ帮助我从这个问题中脱颖而出

Answer 1

在最近我构建的Solr自动完成的演示中，我使用了jquery.autocomplete.html.js，它支持为自动完成标签传递任意html。

以下是我的应用程序中的外观（在CoffeeScript中）：https://github.com/onemorecloud/demo-rails-jquery-rsolr-address-autocomplete/blob/master/app/assets/javascripts/addresses.js.coffee

$ ->

  $('input[type="search"]').autocomplete

    delay: 0
    html: true

    source: (request, response) ->

      $.getJSON "/autocomplete?q=#{request.term}", (data) ->

        suggestions = []

        $.each data.response.docs, (i, doc) ->

          label = # create a HTML label using doc, a Solr response document
          value = # create a text-field value for the selected document

          suggestions.push(
            label: label,
            value: value
          )

        response suggestions

你可以做类似的事情，只需将你需要的内容连接到label变量。

jQuery自动完成远程solr数据源和自定义数据作为html问题

1 个答案: