2

ajaxを使用してphpコードのオートコンプリートを実行しました。このコードを使用して1つのファイルをオートコンプリートしました。同じコードを使用して複数のフィールドをオートコンプリートできますか...

コードにはajaxコードが含まれています

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Autocomplete.....</title>

<script type="text/javascript" src="jquery-1.2.1.pack.js"></script>

<script type="text/javascript">
    function lookup(inputString) 
    {
        if(inputString.length == 0) 
        {
            // Hide the suggestion box.
            $('#suggestions').hide();
        }
        else 
        {
            $.post("rpc.php", {queryString: ""+inputString+""}, function(data)
            {
                if(data.length >0) 
                {
                    $('#suggestions').show();
                    $('#autoSuggestionsList').html(data);
                }
            });
        }
    } // lookup

    function fill(thisValue) 
    {
        $('#inputString').val(thisValue);
        setTimeout("$('#suggestions').hide();", 200);
    }

</script>

<style type="text/css">

    body 
    {
        font-family: Helvetica;
        font-size: 11px;
        color: #000;
    }

    h3 
    {
        margin: 0px;
        padding: 0px;   
    }

    .suggestionsBox 
    {
        position: relative;
        left: 30px;
        margin: 10px 0px 0px 0px;
        width: 200px;
        background-color: #212427;
        -moz-border-radius: 7px;
        -webkit-border-radius: 7px;
        border: 2px solid #000; 
        color: #fff;
    }

    .suggestionList 
    {
        margin: 0px;
        padding: 0px;
    }

    .suggestionList li 
    {

        margin: 0px 0px 3px 0px;
        padding: 3px;
        cursor: pointer;
    }

    .suggestionList li:hover 
    {
        background-color: #659CD8;
    }

</style>



</head>

<body>


<div>
        <form>
            <div>
                Type your county:
                <br />
                <input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" />
            </div>

            <div class="suggestionsBox" id="suggestions" style="display: none;">
                <img src="upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
                <div class="suggestionList" id="autoSuggestionsList">
                    &nbsp;
                </div>
            </div>
        </form>
    </div>
</body>
</html>

データベース接続ページのコードは

<?php

$con=mysql_connect("localhost","root","");
mysql_select_db("name",$con);

if(!$con) 
{
        echo 'ERROR: Could not connect to the database.';
}
else 
{
        if(isset($_POST['queryString'])) 
        {

        $queryString = mysql_real_escape_string($_POST['queryString']);

        if(strlen($queryString) >0) 
        {

        $query = mysql_query("SELECT cname FROM country WHERE cname LIKE '$queryString%' LIMIT 10");
                if($query) 
                {
                    while($result= mysql_fetch_object($query))
                    {

        echo '<li onClick="fill(\''.$result->cname.'\');">'.$result->cname.'</li>';
                    }
                } 
                else 
                {
                    echo 'ERROR: There was a problem with the query.';
                }
        } 
        else 
        {
                // Dont do anything.
        }
        } 
        else 
        {
            echo 'There should be no direct access to this script!';
        }
}

?>
4

2 に答える 2

1

はい、コードを使用して複数のフィールドをオートコンプリートできます。


迅速で汚い方法：

HTML：

<input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill(this);" />
<input type="text" size="30" value="" id="inputString2" onkeyup="lookup(this.value);" onblur="fill(this);" />
<input type="text" size="30" value="" id="inputString3" onkeyup="lookup(this.value);" onblur="fill(this);" />

Javascript：

function fill(element,thisValue) 
{
    element.value = thisValue;
    setTimeout("$('#suggestions').hide();", 200);
}



jQueryとより効率的な方法（jQueryバージョン1.2.1に基づく：

HTML：

<input type="text" size="30" value="" class="autoupdate" name="field1" />
<input type="text" size="30" value="" class="autoupdate" name="field2" />
<input type="text" size="30" value="" class="autoupdate" name="field3" />

Javascript（jQuery 1.2.1を使用）：

// fill on blur!
$(".autoupdate").blur(function()
{ 
    $(this).val(thisValue);
    setTimeout("$('#suggestions').hide();", 200);
});

// lookup value onkeyup!
$(".autoupdate").keypress(function()
{
    var fieldvalue = $(this).val();
    if ( fieldvalue.length > 0 )
    {
        // hide selections box
        $('#suggestions').hide();

    } else {

        $.post("rpc.php", {queryString: ""+fieldvalue+""}, function(data)
        {
            if(data.length >0) 
            {
                $('#suggestions').show();
                $('#autoSuggestionsList').html(data);
            }
        });

    }
});



さらなる最適化：

キーを押したときにURLをAJAXする必要はありません。自動入力するために余分な秒を気にしない場合; 代わりに、PHPフォームをonblurで送信することをお勧めします。さらに、JSONを利用して、基本的に1回のAJAX呼び出しで必要なすべてのデータを取得できます。これにより、最終的にフォームのフットプリントに1つのAJAX呼び出しと1つのMySQLデータベースクエリが含まれるようになります。それ以外の場合は、起動される各キーアップイベントでサーバーをドキドキさせるだけです。

-または-

または、PHPフォームを送信する前に2〜3秒待機する遅延を設定できます。次に、遅延したAJAX呼び出しが不必要に積み重なるのを防ぐために、追加のキーを押したときにsetTimeoutがクリアされるようにする必要もあります。

于 2012-04-12T08:13:57.917 に答える
0

したがって、すべて要件によって異なります。あるフィールドのオートコンプリートが同じページの別のフィールドのオートコンプリートに役立つ必要はありません。また、ユーザーが同じ文字列を入力する可能性はどのくらいありますか。

あなたはそれについて賢く、サーバーからの応答を連想配列に保存し、最初にこの連想配列をチェックしてから、サーバーを呼び出してそこからデータを提供できるかどうかを確認できると言っていますが、そのためにはあなたをお勧めしますサーバーからのJSONデータを保存し、JavaScript（テンプレートなど）を使用してHTMLを構築します。連想配列にHTMLを保存することはできますが、テキストボックスによってはHTMLが変わる可能性があります。

コードはおそらく次のようになります。

<script type="text/javascript">
    var searchResults=[];
    function lookup(inputString) 
    {
        if(inputString.length == 0) 
        {
            // Hide the suggestion box.
            $('#suggestions').hide();
        }
        else if(searchResults[inputString])
        {
           $('#suggestions').show();
           $('#autoSuggestionsList').html(searchResults[inputString]);
        }
        {

            $.post("rpc.php", {queryString: ""+inputString+""}, function(data)
            {
                if(data.length >0) 
                {
                    $('#suggestions').show();
                    $('#autoSuggestionsList').html(data);
                }
            });
        }
    } // lookup

    function fill(thisValue) 
    {
        $('#inputString').val(thisValue);
        setTimeout("$('#suggestions').hide();", 200);
    }

</script>

明らかに、オートサジェストを与えるフィールドに基づいて、セレクターを変更したり、divのオフセットなどを変更したりする必要があります。

お役に立てれば。

于 2012-04-12T07:45:33.643 に答える