搜索框结果单击并呈现 html 页面

Question

您好，我正在建立一个网站。

问题是，在搜索栏中，当我输入一些内容时，我会得到这个可用搜索查询的自动列表，如图所示。 enter image description here 我想要的是当我看到这个列表并单击“AAPL：Apple Inc.”时。然后我想渲染一个名为“aapl.html”的html页面，我不知道我应该如何处理。 我的搜索框的html代码如下

    <div class="searchbox">


        <!-- /.row -->

        <!-- Search Box -->
        <div class="container" style="max-width: 700px;">

                <h2 style="margin-bottom: -20px;"><kbd style="background-color: #0E6251; font-size: 20px;">text text some text</kbd>
                </h2>
                <h2><kbd style="background-color: #0E6251; font-size: 20px;">text text some text</kbd></h2>

                        <div class="panel panel-default" style="margin-bottom: 13px;">
                            <!-- Default panel contents -->

                            <div class="panel-heading">

                                <div class="input-group" style="margin-left: -3px; margin-right: -3px;">

                                    <input type="hidden" name="search_param" value="name" id="search_param">
                                    <input id="searchText"type="text" class="form-control" name="q" placeholder="Ticker here :)    e.g. AAPL or Apple Inc." id="search_key" value="">
                                    <span class="input-group-btn">

                                        <button class="btn btn-danger" type="submit">  Search  </button>
                                    </span>

                                </div>

                            </div>

                            <!-- List group -->
                            <ul id="autolist" class="list-group">
                                <div id="autocompleteTest">
                                </div>
                            </ul>

                        </div>
            <div class="row">
                <div class="col-md-2">
                    <div class="">
                        <ul id="autocompleteTest">

                        </ul>
                    </div>
                </div>
            </div>
        </div>

    </div>        
    <!-- /.container -->

这个搜索框工作的javascript如下

$(document).ready(function () {
    $("#searchText").click(function () {
        $("#x").removeClass('hide');
    });
    $(".list-group-item").hover(function () {
        $(this,".list-group-item").css('background-color','rgba(172, 172, 172, 0.11)');

    },function () {
        $(this,".list-group-item").css('background-color','white');
    });

    $("#searchText").on( "trigger", function () {
        if ($( "#searchText" ).val()==''){
            $('#autocompleteTest').empty();
        }
        return false;
    } );
    $("#autocompleteTest").empty();
    var availableTags = [
        "AAPL : Apple Inc.",
        "Grisel Salmons",
        "Loree Pollak",
        "Kena Vanhorne",
        "Rodger Reuben",
        "Karen Mccutcheon",
        "Lourdes Newnam",
        "Cher Gershon",
        "Wava Hiers",
        "Georgine Gillette",
        "Marquetta Trotter"
    ];
    $('#searchText').autocomplete({
        search: function(event, ui) {
            $('#autocompleteTest').empty();
            $("#x").removeClass('hide')
        },
        close:function(){
            if ($('#searchText').val()==''){
                $('#autocompleteTest').empty();
            }
            $("#x").addClass('hide')
        },
        minLength: 1,
        source: availableTags
    }).data('ui-autocomplete')._renderItem = function(ul, item) {
        return $('<div/>')
            .data('ui-autocomplete-item', item)
            .append("<li class='list-group-item'> <div class='row'> <div class='col-md-12'> <div class='media-left media-middle'> <a href='#'> <img class='media-object img-circle' src='http://placehold.it/40x40'> </a> </div> <div id='center'>" + item.value + "<div id='center' class='material-switch pull-right'> <input id='"+item.value+"' name='someSwitchOption001i' type='checkbox'/> <label for='"+item.value+"' class='label-primary'></label> </div> </div> </div> </div> </li>")
            .appendTo($('#autocompleteTest'));
    };
    $("#x").on("click",function () {
        $("#searchText").val('');

    })
});

我只想在点击AAPL: Apple Inc.的搜索结果时渲染一个html页面（aapl.html），我该怎么做？

请帮助我。

Answer 1

没关系，我已经知道该怎么做了。 这是我以前的 javascript 代码。附加一些html代码时的第四行， 我得到了 item.value 并用“：”将其拆分，并获取拆分 item.value 的第一个元素，即 AAPL。并将其变为小写--> aapl，然后放在.

}).data('ui-autocomplete')._renderItem = function(ul, item) {
        return $('<div/>')
            .data('ui-autocomplete-item', item)
            .append("<li class='list-group-item'> <div class='row'> <div class='col-md-12'> <div class='media-left media-middle'> <a href='#'> <img class='media-object img-circle' src='http://placehold.it/40x40'> </a> </div> <div id='center'>" + item.value + "<div id='center' class='material-switch pull-right'> <input id='"+item.value+"' name='someSwitchOption001i' type='checkbox'/> <label for='"+item.value+"' class='label-primary'></label> </div> </div> </div> </div> </li>")
            .appendTo($('#autocompleteTest'));
    };
    $("#x").on("click",function () {
        $("#searchText").val('');

    })
});

编辑代码：

 }).data('ui-autocomplete')._renderItem = function(ul, item) {
        return $('<div/>')
            .data('ui-autocomplete-item', item)
            .append("<li class='list-group-item'> <div class='row'> <div class='col-md-12'> <div class='media-left media-middle'> <a href='#'> <img class='media-object img-circle' src='http://placehold.it/40x40'> </a> </div> <div id='center'>" + "<a href=/analytics/signals/"+ item.value.split(":")[0].toLowerCase() + ">" +item.value+ "</a>"+ " </div> </div> </div> </li>")
            .appendTo($('#autocompleteTest'));
    };
    $("#x").on("click",function () {
        $("#searchText").val('');

    })
});