javascript - 如何将我的自动建议结果限制为 5 个结果

Question

我只想为我的自动建议框提供 5 个结果，但不知道该怎么做。任何帮助将不胜感激这是我的代码：

<div class="input-wrapper">
    <input type="text" class="autosuggest" value="Type in a city or town" onblur="onBlur(this)" onfocus="onFocus(this)" >
    <input type="submit" value="Search">

    <div class="dropdown">
        <ul class="result"></ul>
    </div>
</div>

这是我的脚本：

$(document).ready(function() {
    $('.autosuggest').keyup(function() {
        var search_term = $(this).attr('value');
        $.post('php/search.php', { search_term: search_term }, function(data) {
            $('.result').html(data);
            $('.result li').click(function(){
                var result_value = $(this).text();
                $('.autosuggest').attr('value', result_value);
                $('.result').html('');
            });
        });
    });
});
function onBlur(el) { 
    if (el.value == '') { 
        el.value = el.defaultValue; 
    } 
} 
function onFocus(el) { 
    if (el.value == el.defaultValue) { 
        el.value = ''; 
    } 
} 

Answer 1

最好的解决方案是在服务器上进行。但是，由于某种原因，如果在服务器上不可行，您可以尝试在 JS 中跟随。在这里，我期望服务器以以下格式“<li>data</li>”返回数据。

$('.autosuggest').keyup(function() {
    var search_term = $(this).attr('value');

    $.post('php/search.php', { search_term: search_term }, function(data) {
        //Edit Start
        var dataarr=data.split('<li>');
        var totalrow=(dataarr.length>5)?5:dataarrr.length;
        $('.result').html('');
        for(var i=1;i<=totalrow;i++){//neglectine first data as it will be blank
             $('.result').html( $('.result').html('')+'<li>'+dataarr[i]);
        }
        //Edit end

        $('.result li').click(function(){
            var result_value = $(this).text();
            $('.autosuggest').attr('value', result_value);
            $('.result').html('');

        });
    });

});

Answer 2

将您的搜索结果限制在search.php文件 (php/search.php) 中。你可以这样做；

$fetch = mysql_query("SELECT * FROM table LIMIT 5")