Twitter bootstrap Typeahead来填充hrefs

我使用引导类型ajax调用来创建一种即时搜索我的网站。这一切都很好，除了Typeahead只能处理标题而不是hrefs。例如：Twitter bootstrap 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中的函数，它取得每个结果的标题并填充下拉列表h it。我希望能够从我的数据库中获得href，然后下拉菜单中的链接实际上可以正常工作，而不仅仅是显示。

问题是，如果我在我的PHP文件中写入$array[] = array("title"=>$row['title'],"href"=>$row['link']");，它会破坏所有内容，因为推测process（）无法处理额外的数据。

有没有人有任何建议？在事先键入的内容更多信息可以在这里找到：http://twitter.github.com/bootstrap/javascript.html#typeahead

感谢

来源

2013-02-19 Lars

您可以使用JSON格式的结果，并和定义一些选项，比如“匹配”，“分拣”，“更新”等：

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; 
    } 
});

来源

2013-02-19 14:43:08 Gonzalo

感谢这个，它的工作相当不错 - 但现在在我的下拉列表中，我得到了整个的字符串javascript对象，而不仅仅是标题。有没有办法阻止这种行为？我使用updater函数去更新时自动将浏览器重定向到href。 – Lars 2013-02-19 16:18:41

你应该检查你的代码。返回下拉列表标签的函数是“荧光笔” 此行：返回item.title.replace（新的RegExp（'（'+ query +'）'，'ig'）， – Gonzalo 2013-02-19 16:36:16

很好，现在工作。你的帮助。 – Lars 2013-02-19 17:50:18

这个完美的脚本的一个说明，item.title只用于ajax源功能。

的代码的其余部分应item.name你定义：

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

来源

2015-06-30 19:26:25

Twitter bootstrap Typeahead来填充hrefs

回答

相关问题