我想在我正在开发的 Sinatra 应用程序中添加增量搜索/实时搜索选项。我将 data_mapper 用作 ORM,将 html 与 Haml 一起使用。我对 Ruby 很熟悉,但 Sinatra 对我来说是个新手。
我想要一个搜索字段,在搜索字段中输入字符时会显示结果列表,正如我们从 google 中了解到的那样。我希望将搜索字段中的字符发送回 Sinatra 应用程序以执行 data_mapper 查询,如下面的 Sinatra 部分所示:
get '/car' do
@cars = CarDb.all(:reg_nr.like => '#{chars_from_srcBox_id}%')
haml :car
end
汽车.haml:
!!!
%html
%head
%title Sinatra App
%link(rel='stylesheet' href='views/style.css')
%link(href='http://fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css')
%body
%form{ :class => "formContainer", :action => "", :method => "post"}
%fieldset
%ol
%ul(style="list-style-type:none")
%li
%label{:for => ":car_search"} Search Car.:
%input{:type =>"carData", :name => "car_search", :class => "txtBox", :id=> srcBox}
%ul(style="list-style-type:none")
- @cars.each do |c|
%li
= "#{c.reg_nr} - #{c.car_make} #{c.car_model}"
我想我需要一些 JavaScript/Coffescript 来将搜索字段中的字符发送回 Sinatra 应用程序?我如何将 Sinatra 与 JavaScript 链接起来?
我遇到了 gon-sinatra,这会是我需要的吗?还有其他更明显的选择吗?
彼得弟兄
最佳答案
如果假设“增量搜索”和“自动完成”大部分是相同的东西,请尝试在 Sinatra 中结合 AJAX 功能(您可以在答案 here 中找到示例)在服务器端,例如 typeahead.js JavaScript 库在客户端。
这是其他有趣的客户端库:
- 在这里您可以找到真正的增量方法,即当建议的单词完全预填充到
input
字段 http://www.pengoworks.com/workshop/jquery/autocomplete.htm 中时
- 原生 jQuery UI 组件 http://jqueryui.com/autocomplete/
- https://www.devbridge.com/sourcery/components/jquery-autocomplete/
关于ruby - Sinatra App 中的增量搜索,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27688542/