search box result click and render html page

Question

Hello I am building a website.

Problem is that in the search bar, when I type something I get this automatic list of available search queries as seen in the picture. enter image description here What I want is that when I see this list and click "AAPL: Apple Inc." then I want to render a html page named "aapl.html" I don't know how should I approach. My html code for the search box is below

    <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 -->

and javascript for this search box to work is below

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

    })
});

I just want to render a html page (aapl.html) when I click the search result of AAPL: Apple Inc. How should I do this?

Please help me.

Answer 1

Never mind, I have figured out how to do. This is my previous javascript code. Fourth line when appending some html code, I got the item.value and split it with ":" and take the first element of the split item.value which is AAPL. and make it lowercase --> aapl, and then put it in the .

}).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('');

    })
});

edited code:

 }).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('');

    })
});