Twitter bootstrap Typeahead 填充href

Posted 2023-03-05

【中文标题】Twitter bootstrap Typeahead 填充href

【英文标题】：Twitter bootstrap Typeahead to populate hrefs

【发布时间】：2013-02-04 02:44:43

【问题描述】：

我使用 bootstrap 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>

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

问题是，如果我在我的 PHP 文件中写 $array[] = array("title"=>$row['title'],"href"=>$row['link']");，它会破坏一切，因为大概 process() 无法处理额外的数据。

有人有什么建议吗？更多关于 Typeahead 的信息可以在这里找到：http://twitter.github.com/bootstrap/javascript.html#typeahead

谢谢

【参考方案1】：

您可以对结果使用 JSON 格式并定义一些选项，例如“matcher”、“sorter”、“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;
    
);

【讨论】：

谢谢你，它工作得很好——但现在在我的下拉列表中，我得到了整个 javascript 对象的字符串，而不仅仅是标题。有没有办法阻止这种行为？我已经使用更新器功能在更新时自动将浏览器重定向到 href。

你应该检查你的代码。返回下拉列表标签的函数是“highlighter”这一行：return item.title.replace(new RegExp('(' + query + ')', 'ig'),

【参考方案2】：

关于 item.title 仅在 ajax 源代码功能中使用的完美脚本的注意事项。

其余代码应为 item.name，如您在以下代码中定义的那样：

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