Bootstrap typeahead risulta in un div, possibile?

Question

Sto cercando di adattare i risultati di typeahead in un particolare div sulla mia pagina. Ottengo i dati di callback JSON ma non so come usarlo per popolare un div particolare. La funzione di processo ha l'unico effetto di elencare i risultati, indipendentemente dalla lunghezza, proprio sotto il campo di ricerca.

Ecco il mio codice, sai come sfruttare i dati di richiamata per popolare un particolare div?

$('#search').typeahead({ 
      source: function(query, process) { 
       $.ajax({ 
        url: '/action/search.php?action=autocomplete', 
        type: 'POST', 
        data: 'query=' + query, 
        dataType: 'JSON', 
        async: true, 
        success: function(data) { 
         //process(data); 
        }, 
        minLength: 1 
       }); 
      } 
    }); 

Answer 1

Ho avuto il problema esatto. Ho scritto un articolo dettagliato sullo stesso.

passare attraverso l'articolo: http://www.wrapcode.com/bootstrap/typeahead-json-objects/

Quando si fa clic sul risultato particolare dai risultati delle query di ricerca. È possibile utilizzare la funzione di aggiornamento per popolare i dati con i valori degli oggetti JSON selezionati ..

$("#typeahead").typeahead({ 
    updater: function(item){ 
    //logic on selected item here.. e.g. append it to div in html 
    return item; 
    } 
}); 

Usare questa funzione:

$("#typeahead").typeahead({ 
    source: function (query, process) { 
     var jsonObj = //PARSED JSON DATA 
     states = []; 
     map = {}; 

     $.each(jsonObj, function (i, state) { 
      map[state.KeyName] = state; 
      states.push(state.KeyName); //from JSON Key value pair e.g. Name: "Rahul", 'Name' is key in this case 
     }); 

     process(states); 
    }, 
    updater:function (item) { 
     $('#divID').html(" " + map[item].KeyName); //from JSON Key value pair 

     return item; 
     // set more fields 

    } 
}); 

Answer 2

V'è in realtà un modo molto semplice per ottenere i risultati in un elemento di pagina specifica, tuttavia, non sono sicuro che sia effettivamente documentato.

La ricerca nel codice sorgente mostra che è possibile passare l'opzione menu, che sembra essere pensata per consentire di definire l'aspetto del menu del wrapping, tuttavia è possibile passare in un selettore e usa questo come bersaglio.

Dato il frammento HTML:

<input id='#typeahead' type='text'> 

<h2>Results</h2> 
<ul id="typeahead-target"></ul> 

è possibile utilizzare il seguente per ottenere i risultati a comparire all'interno dell'elemento ul:

$('#typeahead').typeahead({menu: '#typeahead-target'}); 

Answer 3

creare prima classe CSS di nome .nascosto {display: none ;}

$(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++){ 
       $('#result').append(liveSearch.template(
        suggestions[i].name, 
        suggestions[i].id)); 
      } 
     }else{ 
      $('#result').append('<div><h1>Nothing found</h1></div>'); 
     } 
    });