自动填充搜索框

时间:2015-03-10 21:06:57

标签: javascript ajax json autocomplete

我关注了一个视频教程,但无论多少小时工作,我都无法输出结果。我期望的输出是当用户键入某个名称来搜索公司时,公司的名称将显示为建议列表。选择某个公司后,将显示公司的更多详细信息,如位置,营业时间。我在这里附上我的HTML,JavaSCript和示例JSON文件。

<body>
    <div id="searcharea">
        <label for="search">Ajax search</label>
        <p> enter the name </p>
        <input type="search" name="search" id="search" placeholder="company 
         name" />
    </div>

<script 
   src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> 
 </script> 
<script src="script.js"></script>
</body>
</html>

$(#search).keyup(function() {
    var searchFiled = $('#search').val();
    var myExp = new RegExp(searchField, "i");

    $.getJSON('mylist.json', function(data) {

        var output = '<ul class="searchresults">';
        $.each(data, function(key, val) {
            if (val.user.search(myExp) != -1) {
                output += '<li>';
                output += '<h2>' + val.company + '</h2>';
                output += '</li>';
            }
        });
        output += '</ul>';
        $('$update').html(output);

    });
});    

{
    "data": [{

        "user_id": "1",
        "name": "Lala",
        "address": "somewhere on the world",
        "company": "big company",

    }, {
        "user_id": "2",
        "name": "Tom",
        "address": "USA",
        "company": "CocaCola",

    }]
    "reminds": 0,
    "message": "this is a message",
    "myID": 0
}

0 个答案:

没有答案