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

希望这有帮助。

如何使用自定义参数在我的搜索栏中填写预先填写？

1 个答案: