使用可點擊的鏈接在Bootstrap Typeahead下拉列表中填充href

Question

我正在使用Sphinx，PHP，ajax，bootstrap和javascript開發搜索引擎。 在填充li標簽的href時遇到麻煩。

需要以下解決方案：1.將下拉列表填充為可點擊2.將freegeoip.com的城市名稱作為JSON文件獲取，但無法將其傳遞給ajax中的select語句3。

這是我的代碼

function __highlight(s, t) {
    var matcher = new RegExp("(" + $.ui.autocomplete.escapeRegex(t) + ")", "ig");
    return s.replace(matcher, "<strong>$1</strong>");
}
$(document).ready(
        function() {
            $("#suggest").autocomplete(
                    {
                        source : function(request, response) {
                            $.ajax({
                                url : '<?php echo $ajax_url;?>',
                                dataType : 'json',
                                data : {
                                    term : request.term
                                },

                                success : function(data) {
                                    response($.map(data, function(item) {
                                        return {
                                            label : __highlight(item.label,
                                                    request.term),
                                            value : item.label
                                        };
                                    }));
                                }
                            });
                        },
                        minLength : 3,
                        select : function(event, ui) {
                            $('#searchbutton').submit();
                        }
                    }).keydown(function(e) {
                if (e.keyCode === 13) {
                    $("#search_form").trigger('submit');
                }
            }).data("autocomplete")._renderItem = function(ul, item) {

                return $("<li></li>").data("item.autocomplete", item).append(
                        $("<a></a>").html(item.label)).appendTo(ul);
            };
        });

我希望下拉列表是可點擊的。 在MySQL中具有網址並使用Ajax創建JSON數組

PHP創建JSON數組

$arr =array();
$q = trim($_GET['term']);
$stmt = $ln_sph->prepare("SELECT * FROM $indexes WHERE MATCH(:match) LIMIT 0,10 OPTION ranker=sph04");


$aq = explode(' ',$q);
if(strlen($aq[count($aq)-1])<3){
        $query = $q;
}else{
        $query = $q.'*';
}
$stmt->bindValue(':match', $query, PDO::PARAM_STR);
$stmt->execute();

foreach($stmt->fetchAll() as $r){
        $arr[] = array('id' => utf8_encode($r['title']), 'label' =>utf8_encode($r['title']), 'href' =>utf8_encode($r['url']));
}

echo json_encode($arr);
exit();

引導代碼

使用上面的代碼進行下拉

嘗試了所有可能的方法。謝謝。

Answer 1

終於找到了我想要的

在渲染時，我沒有在href中添加任何值，因此無法將url與label連接

function __highlight(s, t) {
    var matcher = new RegExp("(" + $.ui.autocomplete.escapeRegex(t) + ")", "ig");
    return s.replace(matcher, "<strong>$1</strong>");
}
$(document).ready(
    function() {
        $("#suggest").autocomplete(
            {
            source : function(request, response) {
                $.ajax({
                url : 'ajax_suggest.php',
                dataType : 'json',
                data : {
                    term : request.term
                },

                success : function(data) {
                    response($.map(data, function(item) {
                    return {
                        label : __highlight(item.label,
                            request.term),
                        value : item.href
                    };
                    }));
                }
                });
            },
            minLength : 3,
            select : function(e, ui) {

            window.location  = (ui.item.value);
             return false;

            }
            }).keydown(function(e) {
        if (e.keyCode === 13) {
            $("#search_form").trigger('submit');
        }
        })
    .data('autocomplete')._renderItem = function(ul, item) {
        return $("<li></li>")
        .data("item.autocomplete", item)
        .append($("<a href='#'>"+ item.value + "</a>").html(item.label))
        .appendTo(ul);
        };
    });

這段代碼可以根據需要正常工作。 多謝你們....