动态搜索栏建议

时间:2018-09-03 20:40:58

标签: javascript jquery html css ruby-on-rails

我想在用户甚至键入一些启发他要搜索的内容之前在搜索栏中显示不同的单词(例如城市名称)。

就像这里:https://mapify.travel/

有什么想法怎么做?

现在我的代码是这个

<%= form_tag search_path, method: :get do %>
  <div class="row">
    <div class="col-md-5" style=" left: 22%;">
      <%= text_field_tag :search, params[:search], placeholder: " z.B. Berlin", class: "suchfeld", id: "autolocation" %>
    </div>

    <div class="row">
      <div class="col-md-2" style="margin-left: 290px;">
        <%= submit_tag "search", class: "btnsearch" %>

      </div>
    </div>

  </div>

<% end %>

2 个答案:

答案 0 :(得分:2)

您可以通过多种方法来实现不同级别的复杂性。

执行此操作的一种简单方法是将要抢先出现的位置的所有选项存储在数组或对象中,并且当用户选择搜索框时,随机选择其中几个以向用户建议。

答案 1 :(得分:1)

请尝试尝试...其中#email是文本字段输入的ID。

这还假定数组arry中的第一项是默认占位符值。如果您不想在html中设置硬编码的默认占位符值,则可以通过编程方式在文档加载时设置占位符。

setInterval(function(){
  var arry = ['example@example.com', 'placeholder 2', 'placeholder 3', 'placeholder 4']
  $this = $('#email')
  var old_placeholder       = $this.attr('placeholder')
  var old_placeholder_index = arry.indexOf(old_placeholder)
  var new_placeholder_index = (old_placeholder_index + 1) % arry.length

  $this.attr('placeholder', arry[new_placeholder_index])
}, 2000);