Bootstrap wpisuje wyniki do elementu div, możliwe?

Question

Próbuję dopasować wyniki nagłówków do konkretnego elementu div na mojej stronie. Otrzymuję dane wywołania zwrotnego JSON, ale nie wiem, jak go użyć, aby zapełnić konkretny element div. Funkcja procesu ma jedyny wpływ na listę wyników, niezależnie od długości, tuż pod polem wyszukiwania.

Oto mój kod, czy wiesz, jak wykorzystać dane wywołania zwrotnego, aby wypełnić konkretny element 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

Miałem dokładny problem. Napisałem szczegółowy artykuł o tym samym.

przejść artykułu: http://www.wrapcode.com/bootstrap/typeahead-json-objects/

Po kliknięciu w szczególności wynikać z wyników wyszukiwań. Można użyć funkcji updater do wypełnienia danych z wybranymi wartościami obiekt JSON ..

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

Użyj tej funkcji:

$("#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

Jest rzeczywiście bardzo prosty sposób, aby uzyskać wyniki do określonego elementu strony, jednak nie jestem pewien, czy jest to rzeczywiście udokumentowane.

Przeszukanie kodu źródłowego pokazuje, że można przekazać opcję menu, co wydaje się mieć na celu umożliwienie zdefiniowania elementu menu do zawijania, ale można przekazać selektor i użyj tego jako celu.

Biorąc pod uwagę fragment html:

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

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

Można użyć następujących czynności, aby uzyskać wyniki pojawiać się wewnątrz elementu ul:

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

Answer 3

najpierw utworzyć klasę css nazwany .hide {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>'); 
     } 
    });