从自动完成 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 内置的自动完成功能可能会更好。请参考this post。

此外，您的代码容易受到 SQL 注入的攻击。你应该切换到Prepared Statements来避免这种情况。

更新：

至于您的第二个问题，您可以先为列表项分配一个类，例如<li class="autocomp-data">，然后将点击处理程序绑定到它。

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

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