ruby - Sinatra App 中的增量搜索

Question

我想在我正在开发的 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，这会是我需要的吗？还有其他更明显的选择吗？

彼得弟兄

Answer 1

如果假设“增量搜索”和“自动完成”大部分是相同的东西，请尝试在 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/