jQuery自动完成通过Rails与远程数据相乘

时间:2012-04-03 17:31:12

标签: jquery ruby-on-rails jquery-ui autocomplete ruby-on-rails-3.2

我正在尝试在Rails 3.2.0中设置jQuery自动完成。如果我在javascript中设置数组作为数据源,我可以正常工作。我的问题是,在页面加载期间,搜索条件最终会变得太多而无法加载。我正在尝试设置远程数据源,但无法填充页面上的内容。

正在返回数据,但选择不会填充。绝大多数代码都是直接来自jQuery UI演示站点。

我错过了什么?

$( "#tags" )
    // don't navigate away from the field on tab when selecting an item
    .bind("keydown", function( event ) {
        if ( event.keyCode === $.ui.keyCode.TAB &&
          $( this ).data( "autocomplete" ).menu.active ) {
              event.preventDefault();
          }
     })
     .autocomplete({
         source: function( request, response ) {
             $.getJSON( "get/tags", {
                 term: extractLast( request.term )
             }, response.name );

          },
          search: function() {
              // custom minLength
              var term = extractLast( this.value );
              if ( term.length < 2 ) {
                  return false;
              }
          },
          focus: function() {
              // prevent value inserted on focus
              return false;
          },
          select: function( event, ui ) {
              var terms = split( this.value );
              // remove the current input
              terms.pop();
              // add the selected item
              terms.push( ui.item.value );
              // add placeholder to get the comma-and-space at the end
              terms.push( "" );
              this.value = terms.join( ", " );
              return false;
          }
      });

1 个答案:

答案 0 :(得分:1)

我发现了我的问题。傻我。阅读自动完成插件上的所有文档很有帮助。我的问题是我没有提供一个适当的“称为”JSON数组。

引自jQuery UI页面

具有标签和值属性的对象数组: [{label:“Choice1”,值:“value1”},...]

所以在你的Rails应用程序中创建渲染的JSON,如下所示:

def get_tags
    @tags = Tag.where(['name LIKE ?', "#{params[:term]}%"])
    @tags_hash = []

    @tags.each do |tag|
      @tags_hash << { label: tag.name }
    end

    render json: @tags_hash
end

同样在上面的代码中,$ .getJSON应该像这样定义:

$.getJSON( "get/tags", {
    term: extractLast( request.term )
    }, response );