Question

我需要一些关于如何在我的Rails应用程序中实现jquery-ui autocomplete的帮助。

我想将自动填充添加到用户可以输入客户名称的文本字段中。由于可能有数百个客户，我需要从表中“远程”拉出建议的自动完成值（至少这是我所理解的）。

我无法理解的要点是如何将建议值提供给自动完成文本框。我已经阅读了jquery-ui文档，但我似乎对此事情有点密集。

所以我真正追求的是一个如何在Rails应用程序中使用它的示例，不一定是javascript如何构建的完整描述（这就是jquery-ui团队为我做的事情=））。

例如，如何为自动完成准备数据，以及如何将自动完成功能附加到文本框中。

Answer 1

jQuery 1.9 / 1.10删除了密钥自动完成并添加了uiAutocomplete

.data("uiAutocomplete") instead of .data("autocomplete")

修改到上面后，它对我有用。

Answer 2

Dale's Answer完全是教程。需要注意的一点是，使用您的第一个查询时，数据源只会将开头与您键入的字符串匹配。如果您想在单词中的任何位置进行搜索，则需要更改：

@people = Person.find(:all,:conditions =>
    ['given_name LIKE ?', "#{params[:term]}%"])

到

@people = Person.find(:all,:conditions =>
    ['given_name LIKE ?', "%#{params[:term]}%"])

（在查询中添加了额外的%）

Answer 3

我基本上遵循了Dale的建议，但我的控制器和js文件略有不同 - 他的版本因某些原因给我提出问题（也许是jcery更新的bc）

背景信息：我尝试自动填写用户输入的DJ名称 - 也是新手

DJ控制器

 class DjsController < ApplicationController
    def index
     if params[:term]
       @djs = Dj.is_dj.where('lower(name) LIKE ?', "%#{params[:term].downcase}%")
       respond_to do |format|  
          format.html
          format.json { render :json => @djs.map(&:name) }
       end
     end    
   end
 end

html.erb文件

  <script type="text/javascript">

$(function() {  
    $('#select_origin').autocomplete({
        source: '<%= djs_path(:json) %>'
      })

    $('.submit-comment').click(function(){
      var dj_name = $('#select_origin').val();
      $('#link_origin_id').val(dj_name);
    })

})

</script>

Answer 4

这是一个很好的帮助。

除了需要获取用户图片的网址之外，还可能无法使用to_json。为此，在模型中添加以下代码。

def avatar_url
    avatar.url(:thumb)
end

然后在控制器而不是to_json使用as_json

respond_to do |format|
    format.json {render :json => @users.as_json(:only => [:id,:name,:username], :methods => [:avatar_url]) }
end

Answer 5

重要的是要注意，如果您的来源是＆＃39;相对较小，例如50个元素，实现应该是不同的（并且更简单）。它在官方文件的第四段中提到：

https://api.jqueryui.com/autocomplete/

使用本地数据时，您只需获取数据并将其传递给自动完成方法，它将为您进行过滤。每次输入一个术语时，您都不需要来回服务器。

function filterByTags(tags) {
  $("#stories-filter").autocomplete({
     source: tags,
     autoFocus: true
  });
}

$("#stories-filter").click(function() {
  $.ajax({
    dataType: 'json',
    method: 'GET',
    url: 'tags/index',
    data: $(this).data('project-id'),
    success: function (response) {
      if(response.success) {
        var tags = response.data.tags;
        filterByTags(tags);
      }
    },
    error: function (response) {
      if(response.status === 422) {
        var $errors = 'There are no tags in this project',
            $errorsContainer = $('.error-container');
        $errorsContainer.append($errors);
        $errorsContainer.show();
      }
    }
  });
});

Answer 6

因为它很旧，但是google仍然出现在这里，所以关于主要答案的小注释基本上是不错的，但是有些事情已经改变了：

请参阅有关将.data（“ uiAutocomplete”）更改为.data（“ autocomplete”）的jquery的答案
我也将在资源集合中推荐一条仅处理json的单独路由
使用rabl创建较小的json（或选择较大的模型）
我喜欢，不喜欢，不区分大小写
前面的％，因此搜索不只是start_with。
方法中的重要遍历，例如item.person.name只是item.name（因此请删除.person）
喝咖啡（以毫升计）
使用限制，以及其中的位置：Person.where（'given_name ilike？'，“％＃{params [：term]}％”）。limit（20）

如何在Rails中设置jquery-ui自动完成

7 个答案: