Question

我是网络编程的初学者，我在搜索栏中遇到了这个问题。问题是我如何完成它所以它会给出一个带有预期结果的下拉栏可供选择并选择其他div来自己给出搜索结果？应该与此页面下的标签搜索栏类似。

代码如下，并提前感谢！在哪里“TODO”!!!

<head>

    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script type="text/javascript">
        var delay = (function(){ // to set timer
            var timer = 0;
            return function(callback, ms){
                clearTimeout(timer);
                timer = setTimeout(callback, ms);
            };
        })();

        $(document).ready(function() {
            var $search = $("#search");
            $search.keyup(function() {
                delay(function () {
                    var $string = $("#search").val();
                    if ( $string == "" || /\s+$/.test($string)) return;
                    var $tag = $string.match(/\S+$/)[0]
                    $.getJSON('/get_tags_by_substring', {'tag':$tag}, function ($data) {
                        console.log($data);
                        /* TODO */   
                    });
                }, 500);
            });
        });   </script> </head>

<style>
    .search_bar{
        bottom: 5px;
        right: 100px;
        /* margin-right: 10px; */
        float: right;
    } </style>

<header> <style type="text/css"> .form {
    float: right;
    margin-top: 0px;
    margin-right: 10px; } </style>
    <div id="wrapper">
        <div id = "header" style="display: table; width: 1150px;">
            <div id="logo" style="display: table-cell;">
                <a href="/">
                   {% load staticfiles %}
                   <!--img src="{% static '.../images/logo_1.png'%}" alt="... logo" align="left"-->
                </a>
            </div>
            <div style="display: table-cell;">
                <nav id="navig" style="margin:0px;">
                    <ul>
                        <li class="button"><a href="/fiction/">1</a></li>
                        <li class="button"><a href="/people/">2</a></li>
                        <li class="button"><a href="/gastro/">3</a></li>
                        <li class="button"><a href="/">4</a></li>
                    </ul>
                </nav>
            </div>
            <div class="search_bar">
                <input type="text" id="search" placeholder="tag..."/><br/>
                <div id="search_results"></div>
            </div> 
        </div>
    </div> </header>

创建标签搜索栏

0 个答案: