动态搜索栏建议

Posted 2023-05-09

【中文标题】动态搜索栏建议

【英文标题】：Dynamic search bar suggestions

【发布时间】：2019-02-08 21:06:43

【问题描述】：

我想在用户输入内容之前在搜索栏中显示不同的字词（例如城市名称），以激发他搜索的内容。

喜欢这里：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 %>

【问题讨论】：

您似乎已经在使用占位符，这是您链接到的网站正在做的事情，所以我不确定问题是什么..？

【参考方案1】：

您可以通过多种不同的复杂程度来做到这一点。

一种简单的方法是将您想要抢先出现的位置的所有选项存储在一个数组或对象中，当用户选择搜索框时，随机选择其中一些建议给用户。

【参考方案2】：

试试这个也许...其中#email 是文本字段输入的ID。

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

setInterval(function()
  var arry = ['[e-mail]', '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);