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

How to set-up jquery-ui autocomplete in Rails

提问by Oscar

I need some help on how to implement a jquery-ui autocompletein my Rails app.

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

I want to add autocompletion to a text field where the user can enter in a customer name. As there can be hundreds of customers, I will need to pull the suggested auto-completion values 'remotely', as in, from a table (at least this is what I understand).

我想向用户可以输入客户名称的文本字段添加自动完成功能。由于可能有数百个客户，我需要“远程”提取建议的自动完成值，例如从表中（至少这是我的理解）。

The main point I am failing to understand is how to provide the suggested values to the autocompletion textbox. I have read the jquery-ui docs, but I seem to be a bit dense on this matter.

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

So what I am really after is an example of how I can get this to work in a Rails app, not necessarily a full description of how the javascript is built (that's what the jquery-ui team has done for me =) ).

所以我真正想要的是一个如何让它在 Rails 应用程序中工作的例子，不一定是关于如何构建 javascript 的完整描述（这就是 jquery-ui 团队为我所做的 =））。

For example, how do I prepare the data for the autocompletion, and how do I attach the autocompletion functionality to a textbox.

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

回答by Oscar

Well I never got an answer to my question above so I ended up having to figure it out for myself. I thought I should post the solution I came up with in case there are any other guys out there who are wondering the same thing.

好吧，我上面的问题从来没有得到答案，所以我最终不得不自己弄清楚。我想我应该发布我想出的解决方案，以防其他人想知道同样的事情。

First thing you should know is that this is my first experience with javascript, and I am just getting the hang of Rails. So by all means, feel free to edit, comment anywhere you feel I have gone wrong with this. Right or wrong at least I know that it functions the way I wanted it to.

您应该知道的第一件事是，这是我第一次使用 javascript，而且我刚刚掌握了 Rails。所以无论如何，请随意编辑、评论任何你认为我在这方面出错的地方。对与错，至少我知道它以我想要的方式运作。

I think the best way to show this is by example. So the following is how I got the autocomplete widget to work in my app. You can go ahead and put the following code in your app even if you don't understand what is happening, then we can go over how each part is working by example. After this you should have a grasp on how to modify it for your use or refractor it.

我认为展示这一点的最佳方式是举例。所以以下是我如何让自动完成小部件在我的应用程序中工作。即使您不明白发生了什么，您也可以继续将以下代码放入您的应用程序中，然后我们可以通过示例了解每个部分的工作方式。在此之后，您应该掌握如何修改它以供您使用或对其进行折射。

INCLUDE JQUERY UI IN YOUR RAILS APP.

在您的 Rails 应用程序中包含 JQUERY UI。

Download a copy of the jQuery UIand place jquery-ui-1.8.2.custom.min.jsinside your /public/javascriptdirectory. Also make sure you have a copy of jQuery itself and that this is also in the same folder.

下载jQuery UI的副本并将jquery-ui-1.8.2.custom.min.js放在您的/public/javascript目录中。还要确保您有 jQuery 本身的副本，并且它也在同一文件夹中。

Include the jQuery UI file and the jQuery file in your application.html.erbfile like this.
(you can name the files as you please as long as they match)

像这样在application.html.erb文件中包含 jQuery UI 文件和 jQuery 文件。
（您可以随意命名文件，只要它们匹配即可）

<%= javascript_include_tag 'jquery.min', 'jquery-ui-1.8.2.custom.min.js' %>

In your download of jQuery UI, you will have a folder that contains all of your CSS data. The name will vary based on the theme you chose, for example I chose the theme 'cupertino'. Place the entire folder containing your CSS data into '/public/stylesheets/'. Then include the CSS file in your application.html.erb like this.

在您下载 jQuery UI 时，您将拥有一个包含所有 CSS 数据的文件夹。名称将根据您选择的主题而有所不同，例如我选择了主题“ cupertino”。将包含 CSS 数据的整个文件夹放入“ /public/stylesheets/”。然后像这样在 application.html.erb 中包含 CSS 文件。

<%= stylesheet_link_tag 'cupertino/jquery-ui-1.8.2.custom' %>

EXAMPLE AUTOCOMPLETE JAVASCRIPT

示例自动完成 JAVASCRIPT

Now take the following chunk of code and place it in one of your 'new' views. You can use this in any view, but realize that I have literally taken it from an existing view belonging to a controller called 'links_controller', and it is pulling data from a 'people_controller'. Hopefully you know enough about Rails to work out what you need to change so this works for you.

现在获取以下代码块并将其放置在您的“新”视图之一中。您可以在任何视图中使用它，但要意识到我实际上是从属于名为“links_controller”的控制器的现有视图中获取它的，并且它正在从“people_controller”中提取数据。希望您对 Rails 有足够的了解，以找出您需要更改的内容，以便这对您有用。

-- Begin big chunk of code --

-- 开始一大块代码 --

    <script type="text/javascript">
    $(function() {

 // Below is the name of the textfield that will be autocomplete    
    $('#select_origin').autocomplete({
 // This shows the min length of charcters that must be typed before the autocomplete looks for a match.
            minLength: 2,
 // This is the source of the auocomplete suggestions. In this case a list of names from the people controller, in JSON format.
            source: '<%= people_path(:json) %>',
  // This updates the textfield when you move the updown the suggestions list, with your keyboard. In our case it will reflect the same value that you see in the suggestions which is the person.given_name.
            focus: function(event, ui) {
                $('#select_origin').val(ui.item.person.given_name);
                return false;
            },
 // Once a value in the drop down list is selected, do the following:
            select: function(event, ui) {
 // place the person.given_name value into the textfield called 'select_origin'...
                $('#select_origin').val(ui.item.person.given_name);
 // and place the person.id into the hidden textfield called 'link_origin_id'. 
        $('#link_origin_id').val(ui.item.person.id);
                return false;
            }
        })
 // The below code is straight from the jQuery example. It formats what data is displayed in the dropdown box, and can be customized.
        .data( "autocomplete" )._renderItem = function( ul, item ) {
            return $( "<li></li>" )
                .data( "item.autocomplete", item )
 // For now which just want to show the person.given_name in the list.
                .append( "<a>" + item.person.given_name + "</a>" )
                .appendTo( ul );
        };
    });
    </script>



<h1>New link</h1>

<% form_for(@link) do |f| %>
  <%= f.error_messages %>

<!-- Place the following text fields in your form, the names are not important. What is important is that they match the names in your javascript above -->
  <p>
        Select which person you want to link:<br /> 
<!-- This is the textfield that will autocomplete. What is displayed here is for the user to see but the data will not go anywhere -->
        <input id="select_origin"/>
<!-- This is the hidden textfield that will be given the Persons ID based on who is selected. This value will be sent as a parameter -->
      <input id="link_origin_id" name="link[origin_id]" type="hidden"/>
  </p>
<!-- end of notes -->
  <p>
    <%= f.label :rcvd_id %><br />
    <%= f.text_field :rcvd_id %>
  </p>
  <p>
    <%= f.label :link_type %><br />
    <%= f.text_field :link_type %>
  </p>
  <p>
    <%= f.label :summary %><br />
    <%= f.text_area :summary %>
  </p>
  <p>
    <%= f.label :active %><br />
    <%= f.check_box :active %>
  </p>
  <p>
    <%= f.submit 'Create' %>
  </p>
<% end %>

-- End Big Chunk of Code --

-- 结束大块代码 --

Okay now to connect the dots.

好的，现在连接点。

PROVIDE DATA FOR AUTOCOMPLETE TO USE AS SUGGESTIONS

为自动完成提供数据作为建议使用

Lets start by connecting up some data that the autocomplete textfield can display in the drop down suggestions. The format we will be using is JSON, but don't worry if you are not familiar with it ... neither am I =). It is good enough to know that it is a way to format text so that other parts of yours/other applications can use it.

让我们首先连接一些自动完成文本字段可以显示在下拉建议中的数据。我们将使用的格式是 JSON，但如果您不熟悉它，请不要担心......我也不熟悉 =)。知道它是一种格式化文本的方法，以便您/其他应用程序的其他部分可以使用它，就足够了。

The data the textfield will need for the autocomplete is specified in the 'source:' option. Because we want to send a list of peoples names and their ID to the autocomplete we will put the following as the source.

文本字段自动完成所需的数据在“源：”选项中指定。因为我们想将人员姓名及其 ID 列表发送到自动完成功能，所以我们将以下内容作为源。

source: '<%= people_path(:json) %>'  

The rails helper above will translate to a string "/people.json". You do not need to create a page at "/people.json". What you do need to do is tell your people_controller what to do when it receives a request for /people with the .json format. Put the following into your people_controller:

上面的 rails helper 将转换为字符串“ /people.json”。您不需要在“ /people.json”创建页面。您需要做的是告诉您的 people_controller 在收到 .json 格式的 /people 请求时该做什么。将以下内容放入您的 people_controller 中：

def index  
# I will explain this part in a moment.
  if params[:term]
    @people = Person.find(:all,:conditions => ['given_name LIKE ?', "#{params[:term]}%"])
  else
    @people = Person.all
  end

  respond_to do |format|  
    format.html # index.html.erb  
# Here is where you can specify how to handle the request for "/people.json"
    format.json { render :json => @people.to_json }
    end
end

Now we have all the people in @people being sent to the autocomplete textfield. This brings up the very next point.

现在我们将@people 中的所有人都发送到自动完成文本字段。这就引出了下一点。

FILTER DATA USED FOR AUTOCOMPLETE SUGGESTION, BASED ON INPUT

基于输入的用于自动完成建议的过滤数据

How does the autocomplete textfield know how to filter the results based on what you type?

自动完成文本字段如何知道如何根据您输入的内容过滤结果？

The autocomplete widget assigned to the textfield will send whatever you type into the textfield as a parameter to your source:. The parameter being sent is "term". So if you were to type "Joe" into the textfield, we would be doing the following:

分配给文本字段的自动完成小部件会将您在文本字段中输入的任何内容作为参数发送到您的源：。发送的参数是“ term”。因此，如果您要在文本字段中输入“Joe”，我们将执行以下操作：

/people.json?term=joe

That is why we have the following in the controller:

这就是为什么我们在控制器中有以下内容：

# If the autocomplete is used, it will send a parameter 'term', so we catch that here
    if params[:term]
# Then we limit the number of records assigned to @people, by using the term value as a filter.
      @people = Person.find(:all,:conditions => ['given_name LIKE ?', "#{params[:term]}%"])
# In my example, I still need to access all records when I first render the page, so for normal use I assign all. This has nothing to do with the autocomplete, just showing you how I used it in my situation.
    else
      @people = Person.all
    end

Now that we have limited the number of records assigned to @people based on what is typed into the autocomplete textfield, we can now turn that into JSON format for the autocomplete suggestions.

既然我们已经根据输入到自动完成文本字段中的内容限制了分配给 @people 的记录数量，我们现在可以将其转换为自动完成建议的 JSON 格式。

respond_to do |format|  
      format.html # index.html.erb  
      format.json { render :json => @people.to_json }
    end 

Now, just review the comments inside the "Big Chunk of Code" which should explain the rest of how this ties together.

现在，只需查看“代码大块”中的注释，它应该可以解释其余部分是如何联系在一起的。

At the end you should have a textfield on your page that acts as the autocomplete and a hidden field that will send the ID in a parameter to your controller.

最后，您的页面上应该有一个充当自动完成功能的文本字段和一个隐藏字段，它将参数中的 ID 发送到您的控制器。

CUSTOMIZE YOUR OWN AUTOCOMPLETE

自定义您自己的自动完成

Once you understand the above and you want to modify it for your use, you should know that the format JSON returned from your controller looks like this:

一旦理解了上述内容并希望对其进行修改以供使用，您应该知道从控制器返回的 JSON 格式如下所示：

[{"person":{"id":1,"given_name":"joe","middle_name":"smith","family_name":"jones","nationality":"australian"}}]

The way to access the different values from the JSON string in your javascript in this case would be:

在这种情况下，从 javascript 中的 JSON 字符串访问不同值的方法是：

ui.item.person.name_of_some_attribute_such_as_given_name

ui.item.person.name_of_some_attribute_such_as_given_name

Pretty, simple. A lot like accessing an ActiveRecord attribute in Rails.

漂亮，简单。很像在 Rails 中访问 ActiveRecord 属性。

One last note. I spent a lot of time looking for a different way to supply the hidden value, as I thought this function should have been built into the jquery widget. However, this is not the case. It is clearly shown in the official jQuery example that the way to send a different value then selected as a parameter, is to use a hidden field.

最后一点。我花了很多时间寻找一种不同的方式来提供隐藏值，因为我认为这个函数应该已经内置到 jquery 小部件中。然而，这种情况并非如此。在官方 jQuery 示例中清楚地表明，发送不同值然后选择作为参数的方法是使用隐藏字段。

Well I hope that helps somebody.

好吧，我希望这对某人有所帮助。

Dale

戴尔

回答by Arun

jQuery 1.9/1.10 removed the key autocomplete and added uiAutocomplete

jQuery 1.9/1.10 移除键自动完成并添加 uiAutocomplete

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

After modifying to above,it worked for me.

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

回答by piffle

Dale's Answeris quite the tutorial. One thing to note is that using your first query, the datasource will only return matches beginningwith the string you type. If you want search anywhere in the word, you need to change:

戴尔的回答是相当的教程。需要注意的一点是，使用您的第一个查询时，数据源将只返回以您键入的字符串开头的匹配项。如果要搜索单词中的任何位置，则需要更改：

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

to

到

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

(added an extra %to the query)

（向%查询添加了额外内容）

回答by strohy1210

I basically followed Dale's advice below but my controller and js files were slightly diff- his version was giving me issues for some reason (maybe bc of jquery updates)

我基本上遵循了下面 Dale 的建议，但我的控制器和 js 文件略有不同-由于某种原因，他的版本给我带来了问题（可能是 jquery 更新的 bc）

Context: I'm trying to autocomplete names of DJs typed in by users - also a newb

上下文：我正在尝试自动完成用户输入的 DJ 名称 - 也是一个新手

DJs Controller

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 file

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>

回答by Bongs

This is a great help.

这是一个很大的帮助。

In addition to it in case if you need to fetch url of image of user, it might not be possible with to_json. For that add the following code in model.

除此之外，如果您需要获取用户图像的 url，可能无法使用to_json. 为此，在模型中添加以下代码。

def avatar_url
    avatar.url(:thumb)
end

And then in controller instead of to_jsonuse as_json

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

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

回答by vicocas

It's important to note that if your 'source' is relatively small, for example 50 elements, the implementation should be different (and a lot simpler). It is mentioned in the fourth paragraph of the official doc:

重要的是要注意，如果您的“源”相对较小，例如 50 个元素，则实现应该有所不同（并且要简单得多）。官方文档第四段提到：

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

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

When using local data all you need to do is obtain the data and pass it to the autocomplete method, and it will do the filtering for you. You don't need to go back and forth to the server every time a term es entered.

使用本地数据时，您需要做的就是获取数据并将其传递给自动完成方法，它会为您进行过滤。您无需在每次输入术语时来回访问服务器。

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();
      }
    }
  });
});

回答by Torsten

Since this is old, but google still comes here, a small note about the main answer, which is essentially good, but some things have changed:

由于这是旧的，但谷歌仍然来到这里，关于主要答案的一个小笔记，本质上是好的，但有些事情已经改变：

• see answer about jquery having changed .data("uiAutocomplete") to .data("autocomplete")

• Also i would recommend a separate route on the resource collection that just handles json

• use rabl to create smaller json (or pluck for larger models)
• ilike , not like, for case insensitive
• the % in front, so the search is not just start_with.
• valiable traversal in the methods, like item.person.name are just item.name (so drop the .person)
• use coffee (in haml)
• use a limit, and where as in: Person.where('given_name ilike ?', "%#{params[:term]}%").limit(20)

• 请参阅有关 jquery 已将 .data("uiAutocomplete") 更改为 .data("autocomplete") 的答案

• 此外，我会推荐一个单独的路线上的资源集合，只处理 json

• 使用 rabl 创建较小的 json（或 pluck 用于较大模型）
• ilike ，不喜欢，不区分大小写
• % 在前面，所以搜索不仅仅是 start_with。
• 方法中的有效遍历，例如 item.person.name 只是 item.name （因此删除 .person）
• 使用咖啡（以哈姆为单位）
• 使用限制，如： Person.where('given_name ilike ?', "%#{params[:term]}%").limit(20)