typeahead.js Ergebnisse in einem angegebenen div

Question

Ich habe versucht, die Vorschläge der Typehead in einem bestimmten HTML-Element wie ein div anstelle der Standard-Auto-Vervollständigen-Popup unter dem Eingabetextfeld anzuzeigen. Gibt es eine Möglichkeit, die Vorschläge an ein benutzerdefiniertes HTML-Element umzuleiten?

A

Answer 1

erste CSS-Klasse mit dem Namen erstellen

.hide{display:none;}//css 
    //javascript 
    $(typeahead class or id name).typeahead(
    { 
     hint: false, 
     highlight: true, 
     minLength: 1, 
     classNames: { 
      menu: 'hide' // add class name to menu so default dropdown does not show 
     } 
    },{ 
     name: 'names', 
     display: 'name', 
     source: names, 
     templates: { 
      suggestion: function (hints) { 
       return hints.name; 
      } 
     } 
    } 
); 
$(typeahead class or id name).on('typeahead:render', function (e, datum) 
{ 
    //empty suggestion div that you going to display all your result 
    $(suggestion div id or class name').empty(); 
    var suggestions = Array.prototype.slice.call(arguments, 1); 
    if(suggestions.length){ 
     for(var i = 0; i < suggestions.length; i++){ 
      $('suggestion div').append(liveSearch.template(
       suggestions[i].name, 
       suggestions[i].id)); 
     } 
    }else{ 
     $('#result').append('<div><h1>Nothing found</h1></div>'); 
    } 
});