Twitter引导Typeahead填充hrefs [英] Twitter bootstrap Typeahead to populate hrefs

问题描述

我正在使用带有ajax调用的bootstrap typeahead来为我的网站创建一种即时搜索.除了Typeahead似乎只能处理标题而不是href的事实之外，这一切都很好.示例:

I'm using the bootstrap typeahead, with an ajax call, to create a kind of instant search for my website. It's all working great, apart from the fact that Typeahead appears only to be able to process the titles and not the hrefs. Example:

我的PHP代码是这样的:

My PHP code is this:

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

$array = array();

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

echo json_encode($array);

我的Javascript在这里:

And my Javascript is here:

$('#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:

...and together, these result in this 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>

process函数是Bootstrap内置的函数，它获取每个结果的标题并为其填充下拉列表.我也希望能够从数据库中获取href，然后下拉列表中的链接将真正起作用，而不仅仅是显示.

The process function is one that came built into Bootstrap and it takes the title of each result and populates a dropdown list with it. I'd like to be able to get the href too from my database, and then the links in the dropdown would actually work, instead of just being for show.

问题是，如果我在PHP文件中写入$array[] = array("title"=>$row['title'],"href"=>$row['link']");，它将破坏所有内容，因为估计process()无法处理其他数据.

The problem is, if I write $array[] = array("title"=>$row['title'],"href"=>$row['link']"); in my PHP file, it breaks everything, as presumably process() can't handle the additional data.

有人有什么建议吗?可以在此处找到有关Typeahead的更多信息: http://twitter.github.com/bootstrap /javascript.html#typeahead

Does anyone have any suggestions? More info on the Typeahead can be found here:http://twitter.github.com/bootstrap/javascript.html#typeahead

谢谢

推荐答案

您可以对结果使用JSON格式，并定义一些选项，例如"matcher"，"sorter"，"updater"等:

You can use JSON format to your results and and define some options such as "matcher", "sorter", "updater", etc:

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:

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

这篇关于Twitter引导Typeahead填充hrefs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！