0

オートサジェストボックスに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 = ''; 
    } 
}
4

2 に答える 2

0

最善の解決策は、サーバー上で行うことです。ただし、何らかの理由でサーバー上でそれができない場合は、JS でフォ​​ローしてみてください。ここでは、サーバーが「<li>データ</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('');

        });
    });

});
于 2012-08-30T05:06:40.110 に答える
0

search.php検索結果をファイル (php/search.php)に制限します。あなたはそれを好きかもしれません。

$fetch = mysql_query("SELECT * FROM table LIMIT 5")
于 2012-08-30T05:55:33.883 に答える