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的搜索结果时，我只想渲染一个html页面（aapl.html）：Apple Inc.我应该怎么做？

请帮帮我。

Answer 1

没关系，我已经想出了怎么做。这是我以前的javascript代码。添加一些HTML代码时的第四行，我得到了item.value并将其拆分为＆＃34;：＆＃34;并获取拆分item.value的第一个元素，即AAPL。并使其小写 - ＆gt; aapl，然后将它放入。

let a = MathExpression(lhs: .Integer(value: 1), rhs: .Integer(value: 2), operator: .divide)
let b = MathExpression(lhs: .Integer(value: 10), rhs: .Percentage(value: 20), operator: .minus)
let c = MathExpression.random()

let d = MathExpression(lhs: .Integer(value: 1), rhs: .Integer(value: 2), operator: .plus)
let e = MathExpression(lhs: .Integer(value: 3), rhs: .Integer(value: 4), operator: .plus)
let f = MathExpression(lhs: .Expression(expression: d), rhs: .Expression(expression: e), operator: .multiply)

let x = MathExpression.random()
let y = MathExpression.random()
let z = MathExpression(lhs: .Expression(expression: x), rhs: .Expression(expression: y), operator: .plus)


print("a: \(a) = \(a.result!)")
print("b: \(b) = \(b.result!)")
print("c: \(c) = \(c.result!)")

print("f: \(f) = \(f.result!)") // the classic (1 + 2) * (3 + 4)
print("z: \(z) = \(z.result!)") // this is completely random

编辑代码：

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

    })
});

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

1 个答案: