3

jQuery UI のオートコンプリートを使用して、1000 以上の値を持つフォームの正しい入力を伝達しようとしています。

オートコンプリートは正常に機能しますが、フィールドの値をそれらの値だけに制限するにはどうすればよいですか?

次の形式のオートコンプリート コード:

$('#animal').autocomplete({
    source: "search_species.php",
    minLength: 3,
    select: function(event, ui) {
        $('#animal').val(ui.item.postcodes);
        $('#code').val(ui.item.code);
        $('#family').val(ui.item.family);
    }
});

オートコンプリート ソースのコード:

$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die ('Error connecting to mysql');
mysql_select_db($dbname);
$return_arr = array();

if ($conn){
    $fetch = mysql_query(
        "SELECT * FROM animals where animals like '%" . mysql_real_escape_string($_GET['term']) . "%'"
    ); 

    /* Retrieve and store in array the results of the query.*/
    while ($row = mysql_fetch_array($fetch, MYSQL_ASSOC)) {
        $row_array['id'] = $row['id'];
        $row_array['value'] = $row['animals'];
        $row_array['family'] = $row['family'];
        $row_array['code'] = $row['code'];
        array_push($return_arr,$row_array);
    }
}  

mysql_close($conn);
echo json_encode($return_arr);

私が言ったように、オートコンプリートは機能します。ユーザーが自分の値を入力できないように、テキスト フィールドの値を検索の値に制限する方法を知る必要があるだけです。

前もって感謝します。

4

1 に答える 1

2

これにはいくつかの方法があります。

1 つの方法は、ドロップダウンから何も選択されていない場合は入力値をクリアし、送信時にフィールドを強制的に空にしないことです。値をクリアする良い方法は、 changeという名前の、メニューが変更または閉じられたときのオートコンプリート イベントを使用することです。このイベントは、アイテムが選択された場合、または入力がフォーカスを失った場合に発生します。ユーザーがメニューからアイテムを選択しなかった場合、ui.item値は null になり、入力に残っている入力値をクリアできます。

次のようにメソッドを実装できます。

$('#animal').autocomplete(
    {
        source: "search_species.php",
        minLength: 3,
        select: function(event, ui) {
            $('#animal').val(ui.item.postcodes);
            $('#code').val(ui.item.code);
            $('#family').val(ui.item.family);
        },
        change: function(event, ui) {
            if(ui.item === null || !ui.item)
               $(this).val(''); /* clear the value */
        }
    });

ここから、入力値が空でないことを確認することにより、フォームの検証または使用しているものにチェックを追加して、アイテムが選択されない限りユーザーが先に進めないようにするのは簡単です。

于 2013-03-15T02:08:28.803 に答える