Populate href in Bootstrap Typeahead dropdown with clickable link

Question

I am working on a search engine, using Sphinx, PHP, ajax, bootstrap and javascript. Having troubles in populating href of li tags.

Need solutions for the followings: 1. Populate dropdown as clickable 2. Getting city name from freegeoip.com as JSON file, but can't pass it to select statement in ajax 3.

Here is my code

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

I want dropdown as a clickable. Having urls in MySQL and using ajax to create JSON array

PHP to create JSON array

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

Bootstrap Code

Using the above code for dropdown

Tried all the possibilities I can.Thanks in advance....

Answer 1

finally found what I want

while rendering I didn't add any value in href so can't able to connect url with 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);
        };
    });

this code works fine as I need. Thanks guys....