La fonction _render de Jquery-UI ne fonctionne pas en saisie semi-automatique

Question

J'essaie d'utiliser la fonction de saisie semi-automatique dans Jquery-UI. Le backend semble fonctionner. Il imprime les objets corrects et renvoie l'objet json correct, cependant, la fonction _render ne se déclenche pas.

Javascript:

var app = window.app = {}; 
app.Problems = function() { 
    this._input = $('#problems-search-txt'); 
    this._initAutocomplete(); 
}; 

app.Problems.prototype = { 
    _initAutocomplete: function() { 
    this._input 
     .autocomplete({ 
     source: '/search_for_problems', 
     appendTo: '#problems-search-results', 
     select: $.proxy(this._select, this) 
     }) 
     .autocomplete('instance')._renderItem = $.proxy(this._render, this); 
    }, 

    _render: function(ul, item) { 
    var markup = ['<span class="name">' + item.name + '</span>']; 
    console.log("trying to render"); 
    return $('<li>').append(markup.join('')).appendTo(ul); 
    }, 

    _select: function(e, ui) { 
    this._input.val(ui.item.name); 
    return false; 
    } 
}; 

HTML:

<div class="problems-search"> 
    <input type="text" id="problems-search-txt" autofocus> 
    <div class="results" id="problems-search-results"></div> 
    </div> 

    <script> 
    new app.Problems; 
    </script> 

Ruby on Rails

classe ProblemsController < ApplicationController

def search_for_problems 
    @problems = Problem.search(params[:term]) 

    logger.debug "there are #{@problems.count} problems with the term" 
    @problems.each do |problem| 
     logger.debug problem.name 
    end 
     respond_to do |format| 
     format.html 
     format.json { @problems = Problem.search(params[:term]) } 
     end 
    end 
end 

Jbuild er:

json.array!(@problems) do |problem| 
    json.name problem.name 
end 

Pourquoi la fonction _render ne fonctionne-t-elle pas?

Answer 1

J'ai essayé votre code, et cela fonctionne très bien. Gardez à l'esprit que la méthode _renderItem se déclenchera uniquement lorsque vous essaierez de taper quelque chose en entrée, et que la valeur (ou les valeurs) appropriée sera trouvée dans la liste des valeurs. En d'autres termes, la méthode _render ne sera invoquée que lorsque le contrôle affiche la liste déroulante des valeurs de la source.

Answer 2

J'ai eu le même problème que vous, avec exactement le même code (peut-être nous avons trouvé le même tutoriel ...)

je devais changer la ligne

.autocomplete('instance')._renderItem = $.proxy(this._render, this); 

à

.autocomplete().data("ui-Autocomplete")._renderItem = $.proxy(this._render, this); 

Cela devrait fonctionner si vous utilisez une version récente de jQuery UI (1.10+)