6

私はこの質問とまったく同じ問題を抱えています：
与えられたサンプルコードで動作しない2つの入力ボックスを持つphpajaxを自動提案します

しかし、提案を試してみると、私はまだ同じ問題を抱えています。
データベースから自動提案したい2つの入力ボックスがあります。
ただし、自動提案は、入力されたフィールドに関係なく、ボックスの1つの下にのみ表示されます。
これは、上部にリンクされた質問の提案の後に私が最終的に得たものです。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script>
function suggest(inputString){
    if(inputString.length == 0) {
        $('#suggestions').fadeOut();
    } else {
    $('#customer').addClass('load');
        $.post("/templates/autosuggest/autosuggest.php", {queryString: ""+inputString+""}, function(data){
            if(data.length >0) {
                $('#suggestions').fadeIn();
                $('#suggestionsList').html(data);
                $('#customer').removeClass('load');
            }
        });
        }
    }

function fill(thisValue) {      
    $('#customer').val(thisValue);
    setTimeout("$('#suggestions').fadeOut();", 10);
}
</script>

<script>
function suggest(inputString){
if(inputString.length == 0) {
    $('#suggestionssearch').fadeOut();
} else {
$('#customersearch').addClass('load');
    $.post("/templates/autosuggest/autosuggest.php", {queryString: ""+inputString+""}, function(data){
        if(data.length >0) {
            $('#suggestionssearch').fadeIn();
            $('#suggestionsListsearch').html(data);
            $('#customersearch').removeClass('load');
        }
    });
    }
}

function fill(thisValue) {      
$('#customersearch').val(thisValue);
setTimeout("$('#suggestionssearch').fadeOut();", 10);
}
</script>

そして私の入力：

<input type="text" name="Customer" value="" id="customer" onkeyup="suggest(this.value);" onblur="fill();" class="" style="height:14px; margin-top:2px;" placeholder="Search Customers" autocomplete="off">
<input type="submit">
<div id="suggestcontainer" style="margin-left:2px;">
  <div class="suggestionsBox" id="suggestions" style="display: none;"> 
    <div class="suggestionList" id="suggestionsList"> &nbsp; </div>
  </div>
</div>


<input type="text" name="Customer" value="" id="customersearch" onkeyup="suggest(this.value);" onblur="fill();" class="" style="width:90px; height:14px; margin-top:2px;" placeholder="Customer" autocomplete="off" required="required"/>
<input type="submit" style="float:right;">
<div id="suggestcontainersearch">
  <div class="suggestionsBoxsearch" id="suggestionssearch" style="display: none;"> 
    <div class="suggestionListsearch" id="suggestionsListsearch"> &nbsp; </div>
  </div>
</div>

私は自分のスクリプトをテストとしてこれを試しました：

<script>
 function suggest(inputString){
    if(inputString.length == 0) {
        $('#suggestions').fadeOut();
                    $('#suggestionssearch').fadeOut();
    } else {
    $('#customer').addClass('load');
            $('#customersearch').addClass('load');
        $.post("/templates/autosuggest/autosuggest.php", {queryString: ""+inputString+""}, function(data){
            if(data.length >0) {
                $('#suggestions').fadeIn();
                $('#suggestionsList').html(data);
                $('#customer').removeClass('load');
                $('#suggestionssearch').fadeIn();
                $('#suggestionsListsearch').html(data);
                $('#customersearch').removeClass('load');
            }
        });
        }
    }

function fill(thisValue) {      
    $('#customer').val(thisValue);
    setTimeout("$('#suggestions').fadeOut();", 10);


    $('#customersearch').val(thisValue);
    setTimeout("$('#suggestionssearch').fadeOut();", 10);
}
</script>

これは、一方に入力すると両方が表示されるという意味で機能します。明らかに必要なものではありませんが、それらが表示されることを示しています。2つのスクリプトが必要ないようです。

どんな助けでも素晴らしいでしょう。よろしくお願いします。

また、誰かが私がケーキの上のアイシングになるキーボードの上下ボタンで自動提案された結果をスクロールする方法を知っているなら!!

4

1 に答える 1

2

オートコンプリートウィジェットを備えたjQueryUIを使用することをお勧めします。

$( "#birds" ).autocomplete({
    source: "search.php",
    minLength: 2,
    select: function( event, ui ) {
        log( ui.item ?
            "Selected: " + ui.item.value + " aka " + ui.item.id :
            "Nothing selected, input was " + this.value );
    }
});

コメントへの回答

自動完了された提案が来る順序をカスタマイズするには、SQLクエリを変更してケースバイケースで使用することができます。$search以下のクエリは、ある時点でそれを含む他の結果の前に始まるすべての結果を返します。

SELECT Customer 
FROM Customers 
WHERE Customer LIKE '%$search%' 
ORDER BY CASE 
    WHEN Customer LIKE '$search%' THEN 1 
    ELSE 2 
END
于 2013-01-17T13:38:06.223 に答える