自动完成jquery与我的json不匹配

Autocomplete jquery not matching my json

本文关键字：我的 json 不匹配 jquery      更新时间：2023-09-26

我正在使用带有rails的jquery ui自动完成，但它不能正常工作。它不会匹配我搜索的结果，但它会显示所有json结果（没有过滤器）。

在我的路线

get '/autocomplete-photos', to: 'photos#autocomplete'

在我的控制器中

  def autocomplete
      @photos = Photo.all
      respond_to do |format|
      format.json { render json: @photos.as_json(only: [:title, :user, :description], methods: [:avatar_url, :user, :photo_url] )}
    end
  end

在我看来

 <%= search_form_for @spot_search, url: search_path do |f| %>
        <%= f.text_field :title_cont, id: "auto-search", :size => 15, :placeholder => "Encuentra spots..." %>
        <button type="submit" class="collapsebutton searchbutton">
        <i class="icon-magnifier"></i></button>
        <% end %>
        </div>
      </div>
      <script>
      $(document).ready(function(){
        $("#auto-search").autocomplete({
          source: "autocomplete-photos.json",
          minLength: 2,
          select: function(event, ui) {
             $('#auto-search').val(ui.item.photo.title);
          }
        }).data( "ui-autocomplete" )._renderItem = function( ul, item ) {
              var inner_html = '<a href="' + item + '"><div class="list_item_container"><div class="image"><img class="avatar_small" src="' + item.photo_url + '"></div><div class="label">' + item.title + '</div><div class="description">' + item.description + '</div></div></a>';
              return $( "<li></li>" )
                  .data( "item.autocomplete", item )
                  .append(inner_html)
                  .appendTo( ul );
          };
      });
      </script>

基本上它是有效的，但我不会得到你在搜索中的结果，但我得到了所有的JSON。我错过了什么？

谢谢！

好的，我通过在控制器中传递术语参数来修复它。

  def autocomplete
      if params[:term]
        @photos = Photo.find(:all,:conditions => ['title LIKE ?', "#{params[:term]}%"])
      else
        @photos = Photo.all
      end
      respond_to do |format|
      format.json { render json: @photos.as_json(only: [:title, :user, :description], methods: [:avatar_url, :user, :photo_url] )}
    end
  end
相关文章：