JQuery автозаполнение удаленного источника данных Solr и пользовательских данных в виде проблемы HTML

Question

Привет, у меня есть приложение для поиска, в котором есть текстовое поле с предложением поиска (в основном автозаполнение),

данные автозаполнения пользовательского интерфейса поступают с удаленного хоста Solr. Я могу получить данные и без проблем отобразить их в выпадающем списке.

Проблема в том, что я хочу отформатировать выпадающий список в 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 ) {

  }
});

Приведенный выше код отображает только текстовую информацию в раскрывающемся списке. Здесь я хочу пользовательский вывод HTML. Для я попытался с помощью следующего кода

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

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

};

и я похвалил блок response () для функции success () в вышеупомянутом автоматическом завершении. потому что ._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 помочь, что здесь ошибка. Если версия является проблемой. пожалуйста, дайте мне знать рабочую версию ... пожалуйста, помогите мне выйти из этого вопроса

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.