Twitter bootstrap Typeahead для заполнения hrefs

Question

Я использую bootstrap typeahead с вызовом ajax, чтобы создать своего рода мгновенный поиск для моего сайта. Все отлично работает, кроме того, что Typeahead появляется только для обработки названий, а не для hrefs. Пример:

Мой PHP код это:

$results = mysql_query("MY SELECT QUERY GOES HERE"); 

$array = array(); 

while ($row = mysql_fetch_assoc($results)){ 
    $array[] = $row['title']; 
} 

echo json_encode($array); 

И мой Javascript здесь:

$('#quickSearch').typeahead({ 
    source: function (query, process) { 

     $.ajax({ 
      url: "my_php_file.php", 
      type: "POST", 
      data: 'query=' + query, 
      dataType: 'JSON', 
      async: true, 
      success: function(data){ 
        console.log(data) 
        process(data) 
      } 
     }) 
    } 
}); 

... и вместе, эти результаты в этом HTML:

<ul class="typeahead dropdown-menu" display: block;"> 
    <li data-value="Baltimore" class="active"> 
      <a href="#"><span class="highlighter">B</span>altimore</a> 
    </li> 
</ul> 

Функция процесса - это функция, которая встроена в Bootstrap и принимает заголовок каждого результата и заполняет ее выпадающим списком. Я хотел бы иметь возможность получить href тоже из моей базы данных, а затем ссылки в выпадающем меню фактически будут работать, а не просто для шоу.

Проблема в том, что если я пишу $array[] = array("title"=>$row['title'],"href"=>$row['link']"); в своем PHP-файле, он разбивает все, так как предположительно процесс() не может обрабатывать дополнительные данные.

Есть ли у кого-нибудь предложения? Более подробная информации о машинописном можно найти здесь: http://twitter.github.com/bootstrap/javascript.html#typeahead

Благодарности

Answer 1

Вы можете использовать формат JSON для ваших результатов и и определить некоторые параметры, такие как «согласовань», «сортировщик», «Updater», и т.д.:

PHP

$results = mysql_query("MY SELECT QUERY GOES HERE"); 
$array = array(); 
while ($row = mysql_fetch_assoc($results)){ 
    $array[] = array("title"=>$row['title'],"href"=>$row 
} 
echo json_encode($array); 

Javascript:

$('#quickSearch').typeahead({ 
    source: function (query, process) { 

     $.ajax({ 
      url: "my_php_file.php", 
      type: "POST", 
      data: 'query=' + query, 
      dataType: 'JSON', 
      async: true, 
      success: function(data){ 
         var resultList = data.map(function (item) { 
         var link = { href: item.href, name: item.title }; 
         return JSON.stringify(link); 
        }); 
       return process(resultList); 
      } 
     }) 
    }, 

    matcher: function (obj) { 
     var item = JSON.parse(obj); 
     return ~item.title.toLowerCase().indexOf(this.query.toLowerCase()) 
    }, 

    sorter: function (items) {   
     var beginswith = [], caseSensitive = [], caseInsensitive = [], item; 
     while (link = items.shift()) { 
      var item = JSON.parse(link); 
      if (!item.title.toLowerCase().indexOf(this.query.toLowerCase())) beginswith.push(JSON.stringify(item)); 
      else if (~item.name.indexOf(this.query)) caseSensitive.push(JSON.stringify(item)); 
      else caseInsensitive.push(JSON.stringify(item)); 
     } 

     return beginswith.concat(caseSensitive, caseInsensitive) 

    }, 

    highlighter: function (link) { 
     var item = JSON.parse(link); 
     var query = this.query.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, '\\$&') 
     return item.title.replace(new RegExp('(' + query + ')', 'ig'), function ($1, match) { 
      return '<strong>' + match + '</strong>' 
     }) 
    }, 

    updater: function (link) { 
     var item = JSON.parse(link); 
     $('#quickSearch').attr('href', item.href); 
     return item.title; 
    } 
}); 

Answer 2

Одно замечание для этого совершенного сценария, которое item.title используется только в ajax source fuction.

Остальная часть кода должна быть item.name, как вы определили в:

var link = { href: item.href, name: item.title };