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

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 as

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

這將在控制檯中輸出PHP。

但是，您最好使用自動完成中內置的jQuery UI。請參閱this post。

此外，您的代碼容易受到SQL注入的影響。您應該切換到準備好的語句以避免這種情況。

UPDATE：

關於你的第二個問題，你可以一類一分配到列表中的項目，如<li class="autocomp-data">然後單擊處理程序綁定到它。

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

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