從自動完成的AJAX JQuery Mobile調用PHP腳本

Question

我有以下自動完成的代碼，可通過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;
?>

我面臨兩個問題：

1. 結果沒有從PHP文件返回，或者我做錯了。 請幫助我修復它。

2. 當前，用戶無法從自動完成列表中選擇一個值。 如何修改此腳本，以允許用戶從文本字段自動完成ul列表中選擇自動完成值？

謝謝。

Answer 1

您需要准備一個json對象，以便從您的PHP文件發送。

看看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注入的攻擊。 您應該切換到“預備語句”以避免這種情況。

更新：

至於第二個問題，您可以先為列表項分配一個類，例如<li class="autocomp-data"> ，然后將一個單擊處理程序綁定到<li class="autocomp-data"> 。

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

請注意，根據您要分配文本的位置，可能需要使用.val()或.html() 。