如何让 typeahead 使用自定义参数填充我的搜索栏？

Question

我在我的应用程序中安装了 '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

Answer 1

可以根据 docs here

添加自定义建议，如下所示

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

这些是呈现的下拉项。 displayKey 是从下拉列表中选择内容后在文本框中呈现的内容。

一个displayKey可以这样渲染

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

这是一个simple demo

希望对您有所帮助。

如何让 typeahead 使用自定义参数填充我的搜索栏？

How can I make typeahead fill in my searchbar with custom params?

javascript

jquery

ruby-on-rails

bootstrap-typeahead

typeahead.js