Как я могу заставить typehead заполнить мою панель поиска пользовательскими параметрами?

Я установил «twitter-typeahead-rails» в свое приложение и настроил его так, чтобы, когда я начинаю вводить текст в поле поиска, предложения выпадали. Затем, когда я нажимаю на предложения, поле поиска заполняется. Но прямо сейчас оно заполняется с помощью displayKey, как в html, который определяет предложения:

<div class='typeahead-name' id='<user.name>'><user.name></div>

Как я могу заставить его заполнить панель поиска только user.name?

Gemfile

gem 'twitter-typeahead-rails'

окно поиска с вводом текста

<%= form_tag users_path, :method => :get do %>
    <%= text_field_tag :search, params[:search], id:"typeahead" %>
    <%= submit_tag "Search" %>
<% end %>

<script type="text/javascript">
  // initialize bloodhound engine
  $(document).ready(function(){
    var bloodhound = new Bloodhound({
      datumTokenizer: function (d) {
        return Bloodhound.tokenizers.whitespace(d.value);
      },
      queryTokenizer: Bloodhound.tokenizers.whitespace,
      // sends ajax request to /typeahead/%QUERY
      // where %QUERY is user input
      remote: '/typeahead/%QUERY',
    });
    bloodhound.initialize();
    // initialize typeahead widget and hook it up to bloodhound engine
    // #typeahead is just a text input
    $('#typeahead').typeahead(null, {
      displayKey: function(user) {
        return "<div class='typeahead-name' id='" + user.name + "'>" + user.name + "</div>";
      },
      source: bloodhound.ttAdapter(),
    });
  });
</script>

маршруты

get 'typeahead/:query' => 'users#typeahead'

users__controller.rb

def typeahead
  q = params[:query]
  render json: User.where('name like ?, "%#{q}%")
end

person Joe Morano    schedule 09.04.2015    source источник
comment
разве displayKey уже не решает? Если я неправильно понял вопрос   -  person Dhiraj    schedule 09.04.2015
comment
Нет, displayKey задает HTML-код, который будет отображаться в раскрывающемся меню предложений. Но когда я нажимаю на предложение, панель поиска просто заполняется тем же необработанным html. Я хочу заполнить его просто user.name.   -  person Joe Morano    schedule 09.04.2015
comment
предложения – это элементы раскрывающегося списка, отображаемые на основе такого шаблона, как этот. displayKey — это тот, который отображается в текстовом поле после того, как что-то выбрано из раскрывающегося списка.   -  person Dhiraj    schedule 09.04.2015
comment
Тогда как я могу отдельно определить нужный html в раскрывающемся списке? Это то, что в настоящее время определено в displayKey, и оно отображается так, как ожидалось.   -  person Joe Morano    schedule 09.04.2015
comment
это именно то, что вы хотите?? jsfiddle.net/dhirajbodicherla/pegp21r7/11   -  person Dhiraj    schedule 09.04.2015
comment
Это! Спасибо, я поиграю с этим и посмотрю, смогу ли я заставить его работать.   -  person Joe Morano    schedule 09.04.2015
comment
@DhirajBodicherla Это работает! Если вы добавите это как ответ, я могу дать вам репутацию :)   -  person Joe Morano    schedule 10.04.2015
comment
Я рад, что это помогло. Да, я действительно хочу добавить ответ, потому что я пытаюсь решить все вопросы, основанные на вводе здесь;)   -  person Dhiraj    schedule 10.04.2015


Ответы (1)


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

templates: {
    suggestion: function (data) {
        return '<p><strong>' + data.value + '</strong> - ' + data.year + '</p>';
    }
}

Это раскрывающиеся элементы, которые отображаются. displayKey — это тот, который отображается в текстовом поле после того, как что-то выбрано из раскрывающегося списка.

DisplayKey может быть отображен следующим образом

displayKey: function(state){
  return 'Selected is ' + state.val;
}

Вот простая демонстрация

Надеюсь это поможет.

person Dhiraj    schedule 10.04.2015
comment
Спасибо! Наткнувшись на ваш ответ из поиска Google, я сэкономил кучу времени :) - person th3v0id; 28.02.2016