Question

我想在我正在开发的Sinatra应用程序中进行增量搜索/实时搜索选项。我使用data_mapper作为ORM和html与Haml。我经历过Ruby，但是Sinatra对我来说很陌生。

我想要一个搜索字段，在搜索字段中输入字符时会显示结果列表，正如我们从谷歌那样知道的。我希望将搜索字段中的字符发送回Sinatra应用程序以执行data_mapper查询，如下面的Sinatra部分所示：

get '/car' do
    @cars = CarDb.all(:reg_nr.like => '#{chars_from_srcBox_id}%') 
    haml :car    
end

car.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，这可能是我需要的还是有更明显的选择？

Br Peter

Answer 1

如果假设“增量搜索”和“自动完成”大部分是相同的，那么尝试在Sinatra中组合AJAX功能（您可以在服务器侧找到答案here）中的示例示例typeahead.js JavaScript库在客户端端。

以下是其他有趣的客户端库：

您可以在此处找到 true 增量方法，即在input字段http://www.pengoworks.com/workshop/jquery/autocomplete.htm
中完全预填充建议字词时
原生jQuery UI组件 http://jqueryui.com/autocomplete/

https://www.devbridge.com/sourcery/components/jquery-autocomplete/

Sinatra App中的增量搜索

1 个答案: