Ajax 推特引导Typeahead以填充HREF

我正在使用引导程序typeahead和一个ajax调用，为我的网站创建一种即时搜索。除了Typeahead似乎只能处理标题而不能处理HREF之外，所有这些都工作得很好。例如：

我的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>

---

您可以使用JSON格式生成结果，并定义一些选项，如“匹配器”、“排序器”、“更新器”等：

PHP

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

$（“#快速搜索”）。提前键入({
来源：功能（查询、流程）{
$.ajax({
url:“my_php_file.php”，
类型：“POST”，
数据：“查询=”+query，
数据类型：“JSON”，
async:true，
成功：功能（数据）{
var resultList=data.map（函数（项）{
var link={href:item.href，name:item.title}；
返回JSON.stringify（link）；
});
返回过程（结果列表）；
}
})
},
匹配器：功能（obj）{
var item=JSON.parse（obj）；
return~item.title.toLowerCase（）.indexOf（this.query.toLowerCase（））
},
分拣机：功能（项目）{
变量beginswith=[]，区分大小写=[]，不区分大小写=[]，项；
while（link=items.shift（））{
var item=JSON.parse（链接）；
如果（！item.title.toLowerCase（）.indexOf（this.query.toLowerCase（））开始于.push（JSON.stringify（item））；
else if（~item.name.indexOf（this.query））caseSensitive.push（JSON.stringify（item））；
else不区分大小写。push（JSON.stringify（item））；
}
return beginswith.concat（区分大小写，不区分大小写）
},
荧光灯：功能（链接）{
var item=JSON.parse（链接）；
var query=this.query.replace（/[\-\[\]{}（）*+？，\\\^$\\\s]/g，“\\$&”）
return item.title.replace（新的RegExp（'（'+query+'），'ig'），函数（$1，match）{
返回“”+匹配+””
})
},
更新程序：函数（链接）{
var item=JSON.parse（链接）；
$（'#quickSearch'）.attr（'href'，item.href）；
返回项目名称；
}
});
这个完美的脚本需要注意一点，item.title仅用于ajax源代码功能

代码的其余部分应为item.name，如您在中所定义：

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

感谢您的支持，它运行得非常好-但是在我现在的下拉列表中，我得到了整个javascript对象的字符串，而不仅仅是标题。有没有办法阻止这种行为？我已经使用updater函数在浏览器更新时自动将浏览器重定向到href。您应该检查代码。返回下拉列表标签的函数是此行的“highlighter”：return item.title.replace（new RegExp（“（“+query+”）”，“ig”），
var link = { href: item.href, name: item.title };