2014-11-13 5 views
0

Twitter Typeahead을 내 Laravel (4.2.11) 프로젝트 (부트 스트랩 2.3.2 포함)에 통합하려고합니다.
결과가 JSON (피들러로 검사 됨)으로 반환되지만 단 하나의 "정의되지 않은"이 항상 대신 표시됩니다.
결과를 반환하지 않는 검색어를 입력하면 "결과 없음"이 올바르게 표시됩니다.Typeahead.js JSON 응답이 렌더링되지 않습니다.

//Simple query in Laravel 
Route::get('/sidebar/clients/{q}', function($q) 
{ 
    $companies = DB::table('ViewCompanies')->select(array('CompanyID', 'FullCompanyName')) 
        ->where('FullCompanyName', 'like', '%'. $q .'%')->get(); 

    return Response::json(array('companies' => $companies)); 
}); 
//Javascript in page 
var clients = new Bloodhound({ 
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('FullCompayName'), 
    queryTokenizer: Bloodhound.tokenizers.whitespace, 
    remote: { 
     url: '/sidebar/clients/%QUERY', 
     filter: function (parsedResponse) { 
      // parsedResponse is the array returned from your backend 
      console.log(parsedResponse); 
      return parsedResponse; 
     }    
    } 
}); 

clients.initialize(); 

$('#clients .typeahead').typeahead({ 
    hint: true, 
    highlight: true, 
    minLength: 3, 
}, 
{ 
    name: 'clients', 
    valueKey: 'CompanyID', 
    displayKey: 'FullCompanyName', 
    source: clients.ttAdapter(), 
    templates: { 
     empty: [ 
      '<div class="tt-empty-message">', 
      'No Results', 
      '</div>' 
     ], 
     header: '<h3 class="tt-tag-heading tt-tag-heading2">Matched Companies</h3>' 
    } 

}); 

위의 코드를 사용하여 내 콘솔 로그 :

Chrome Console Log

답변

0

내 JSON을 JS 배열로 구문 분석해야한다는 아이디어를 주신 Eduardo에게 감사드립니다.

내 한 줄 솔루션 (풀 제거 필터 쇼)를 고안 할 수 있었다있는 :

검색을 수행

이 두 질문에 밝혀

 filter: function (parsedResponse) { 
      console.log(parsedResponse); 
      var parsedResponse = $.map(parsedResponse, function(el) { return el; }); 
      return parsedResponse; 
     }    
0

당신이 로그인하는 parsedResponse의 출력이 무엇입니까? DB :: table은 배열이 아니라 객체를 반환한다고 생각합니다.

return Response::json(array('companies' => $companies->toArray())); 

그런 다음 결과를 기록하고 Bloodhound 개체의 "필터"기능에서 서식을 지정하십시오. 도움이 되었기를 바랍니다.

+0

시도해 보았습니다. 그런 다음 이전에 발생한 쿼리에 대해 "결과 없음"이 표시됩니다. sly는 4 개의 항목을 돌려 줬다. 원래 코드에 콘솔 로그를 추가하고 있습니다. – SteB

관련 문제