Twitter bootstrap Typeahead to populate hrefs

问题

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:

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

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

...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>

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.

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.

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

Thanks

回答1:

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:

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

回答2:

One note for this perfect script that item.title used only in ajax source fuction.

The rest of the code should be item.name as you defined in:

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

来源：https://stackoverflow.com/questions/14957152/twitter-bootstrap-typeahead-to-populate-hrefs

标签

ajax

href

bootstrap-typeahead