谷歌搜索引擎中的自動過濾器應用程序

我有一個城市模型，並有81個城市在這個模型中，只有db字段是名稱。谷歌搜索引擎中的自動過濾器應用程序

我希望用戶能夠從導航欄中的下拉列表中選擇一個城市，但用戶應該能夠通過在開頭輸入幾個字母來快速過濾這些城市。我想要做的確切的例子是在這個網站：www.dabble.co

我不知道我應該遵循哪種方式來做到這一點。任何想法都是很好的。

2017-05-27 Enis D.

您將需要使用AJAX做類似的事情。選擇框的Rails options_from_collection_for_select方法會給你第一個字母。這對於81個城市來說可能就足夠了。 –

如果您使用的是JQuery，則有http://selectize.github.io/selectize.js/，它有國家選擇欄的示例。
您想要在呈現表單的控制器中創建可訪問的城市集合。
例如

def new 
    @cities = City.all 
end

您可以輕鬆地用下面的助手添加相應<select>表單標籤：

<%= select_tag("cities", 
      options_from_collection_for_select(@cities, 'id', 'name'), 
      id: "selectize_cities" # sets the id of the select tag 
)%>

根據你的Javascript + Rails的設置，需要你可以添加selectize.js的所有組件後到您的JavaScript文件

$("#selectize_cities").selectize();

如果您想要手動實現這個（沒有jQuery的），一種方式可以將數據傳遞到div標籤在HTML查看和訪問它使用JavaScript

<%= div.tag(id: "selfmade", data_cities: @cities.to_json)%> #tag helper 
const cities = JSON.parse(document.querySelector("#lol").getAttribute('data_cities')); //plain js

還有YouTube上Railscasts「簡單的搜索」，這應該幫助你進一步移動！

來源

2017-05-27 21:53:15 Niklas

谷歌搜索引擎中的自動過濾器應用程序

回答

相關問題