0

AJAX経由でPHPファイルを呼び出し、結果をJSON形式で取得するためのオートコンプリートコードを以下に示します。

$( "#autocomplete_customer" ).on( "listviewbeforefilter", function ( e, data ) {
    var $ul = $( this ),
        $input = $( data.input ),
        value = $input.val(),
        html = "";
    $ul.html( "" );
    if ( value && value.length > 0 ) {
        $ul.html( "<li><div class='ui-loader'><span class='ui-icon ui-icon-loading'></span></div></li>" );
        $ul.listview( "refresh" );
        $.ajax({
            url: "SearchCustomer.php",
            dataType: "jsonp",
            crossDomain: true,
    data: {
                term: $input.val()
            }

        })
        .then( function ( response ) {
            $.each( response, function ( i, val ) {
                html += "<li>" + val + "</li>";
            });
            $ul.html( html );
            $ul.listview( "refresh" );
            $ul.trigger( "updatelayout");
        });
    }
});

SearchCustomer.php ファイルは次のとおりです。

<?php
include "config.php";

mysql_select_db($db, $con);
$search = $_GET['term'];    
$result = mysql_query("my SELECT query on basis of $search") or die('Something went wrong');
$json = '[';
    $first = true;
    while ($row = mysql_fetch_assoc($result))
    {
        if (!$first) { $json .=  ','; } else { $first = false; }
        $json .= ".$row['cli_razon_social'].";
    }
    $json .= ']';
    echo $json;
?>

私は2つの問題に直面しています:

  1. 結果が PHP ファイルから返されないか、間違っています。修正するのを手伝ってください。

  2. 現在、ユーザーはオートコンプリート リストから値を選択できません。ulこのスクリプトを変更して、ユーザーがテキスト フィールドのオートコンプリートリストからオートコンプリート値を選択できるようにするにはどうすればよいですか?

ありがとう。

4

1 に答える 1

1

PHP ファイルから送信する json オブジェクトを準備する必要があります。

をご覧くださいjson_encode()。

理想的には、連想配列を準備してから JSON に変換します。

例えば

$arr = array();
$arr['name'] = 'PHP';
echo json_encode($arr);

出力

{
    'name' : 'PHP'
}

その後、JS で名前を次のように参照できます。

.then(function(resp) { console.log(resp.name); }

PHPこれはコンソールに出力されます。

ただし、jQuery UI の組み込みのオートコンプリートを使用した方がよい場合があります。この投稿を参照してください。

さらに、コードは SQL インジェクションに対して脆弱です。これを回避するには、Prepared Statements に切り替える必要があります。

アップデート ：

2番目の問題については、最初にリスト項目にクラスを割り当ててから<li class="autocomp-data">、クリックハンドラーをそれにバインドできます。

$ul.html( html );
$('.autocomp-data').click(function() {
    $('correct-selector').val($(this).text());
});

.val()テキストを割り当てる場所によっては、 または のいずれかを使用する必要がある場合があることに注意してください.html()。

于 2013-08-06T16:46:21.107 に答える