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中使用url并使用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();

Live jsFiddle

使用上面的代码进行下拉

尝试了所有可能的事情。提前谢谢......

Answer 1

终于找到了我想要的东西

渲染时我没有在href中添加任何值，因此无法将url与标签连接

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

此代码可以正常工作。谢谢你们......

使用可单击链接在Bootstrap Typeahead下拉列表中填充href

1 个答案: