부트 스트랩 유형 선행 결과가 div로 표시됩니까?

Question

내 페이지의 특정 div에 선행 결과를 맞추려고합니다. JSON 콜백 데이터를 얻지 만 특정 div를 채우는 데 사용하는 방법을 모르겠습니다. 프로세스 기능은 검색 필드 바로 아래에 길이가 무엇이든 결과를 나열하는 유일한 효과가 있습니다.

내 코드는 특정 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

정확한 문제가 있습니다. 나는 같은 것에 대한 상세한 기사를 썼다.

기사를 통해 이동 : http://www.wrapcode.com/bootstrap/typeahead-json-objects/

당신이 검색 쿼리 결과에서 특정 결과를 클릭합니다. 당신은 .. 선택 JSON 객체 값으로 데이터를 채울 업데이터 기능을 사용할 수 있습니다

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

이 기능을 사용 :

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

특정 페이지 요소에 결과를 얻을 수있는 정말 간단한 방법이 실제로있다, 그러나 실제로 문서화되어 있는지 확신 할 수 없습니다.

소스 코드를 검색하면 옵션 menu이 전달 될 수 있음을 알 수 있습니다. 이는 랩핑 메뉴 요소의 모양을 정의 할 수 있도록 의도 된 것으로 보이지만 선택기를 전달할 수 있습니다. 목표로 사용하십시오.

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

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

당신은 결과가 ul 요소 내에 표시 얻기 위해 다음을 사용할 수 있습니다 : html로 조각을 감안할 때

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

Answer 3

처음 만들 CSS 클래스 이름 .hide {표시 : 없음 ;}

$(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>'); 
     } 
    });