jQuery的自動完成拉

Question

我試圖解決： 用戶，輸入，比如08212一個郵政編碼，或任何美國郵政編碼爲此事和jquery UI Autocomplete稱此爲源文件：../src/php/registration/getFanLoc.php，該文件確實查詢反對基於輸入的郵政編碼的特定字段的數據庫（如下所述）。

對的index.php形式/ jQuery的：

假設所有的jQuery UI的代碼已經在這個文件

<script type="text/javascript"> 
    $(document).ready(function() 
    { 
     $('input#zip').autocomplete({ 
      dataType: "json", 
      source: "../src/php/registration/getFanLoc.php", 
      minLength: 3 
     }); 
    }); 
</script> 

<form method="post" id="FanDetail"> 
    <div class="ui-widget"> 
    <label for="zip">Zip: </label> 
    <input id="zip" name="zipcode" value="US Zipcode" onFocus="clearText(this)" /><br /> 
    </div> 
</form> 

的getFanLoc.php文件 - 即查詢mysql對應於輸入的5位郵政編碼的任何記錄：

 <?php 
    try{ 
     /////////////////////////////////////////////////////////// 
     $zip = mysql_real_escape_string($_GET['zipcode']); ////// 
     /////////////////////////////////////////////////////////// 
     require_once('../../cfg/dbi.php') or die('Cant require dbi'); 
     $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); 
     $sth = $dbh->prepare(
     'SELECT fanDetLocID, fanDetLocCity, fanDetLocState FROM fanDetailLocation WHERE fanDetLocZip = ?'); 
     $sth->bindParam(1, $zip); 
     $sth->execute(); 
    while ($res = $sth->fetch(PDO::FETCH_ASSOC)) { 
     foreach($res as $column=>$val) { 
      $res[$i][$column] = $val; 
     } 
     $i++; 
     } 
    print json_encode($res); 
} 


    catch(PDOException $e){ 
     file_put_contents('../../../PDODBConnectionErrors.txt', 'ERROR: [getFanLoc.php] about '.$e->getMessage().'<br>', FILE_APPEND); 
    } 



    ?> 

我原來有麻煩，因爲它沒有連接到數據庫，並且PDODBConnectionErrors.txt有錯誤，但我從FIXED那一部分，現在它什麼都不做，但現在不會在文件中拋出錯誤。任何人看到我做錯了什麼？我很新手使用autocomplete jQuery UI widget，所以在我身上很容易:)。

變化我已經試過：

• 嘗試添加在$ _GET [「郵政編碼」上面，因爲下面的思想評議這個插件使用$_GET代替$_POST。將它從$ _POST更改爲$ _GET是正確的，但是現在我在直接訪問文件時遇到以下問題：

• 還試圖直接訪問文件，如getFanLoc.php?zipcode=08039這似乎至少讓我更接近。 * 現在頁面狀態*False當我從這個URL訪問它，這讓我覺得我的while() foreach()循環是錯誤的。有人看起來有些驚人的強大嗎？

要添加：我使用此插件：http://jqueryui.com/demos/autocomplete/。由於@Sennet

**固定while（）循環（感謝孫納特）的作品上直接訪問，但不是形式：

$jsonArray = array(); 
    while ($result = $sth->fetch(PDO::FETCH_ASSOC)) { 
    $jsonArray[] = array(
      'label' => $result['fanDetLocID'], 
      'value' => $result['fanDetLocCity']); 
    } 
    print $jsonArray; // print results of array 
    print json_encode($jsonArray); // json encode that array 
} // can't have code between here 

// and here 
    catch(PDOException $e){ 
     file_put_contents('../../../PDODBConnectionErrors.txt', 'ERROR: [getFanLoc.php] about '.$e->getMessage().'<br>', FILE_APPEND); 
    } 

4小時Sennet工作後，我們現在有：

。

<script type="text/javascript"> 
$(document).ready(function() 

{ $（ '輸入＃拉鍊'）自動完成（{

dataType: "json", 
    source: "../src/php/registration/getFanLoc.php", 
    minLength: 3, 
    select: function(event, args){ 
     event.preventDefault(); 
     var joinedValues = args.item.value; 
     var id = joinedValues.split("|")[0]; 
     var cityAndState= joinedValues.split("|")[1]; 
     document.getElementById('actualZip').value = cityAndState ; 
      document.getElementById('zip').value = id; 
    } 
}); 

}）;

Answer 1

要做的第一件事就是嘗試直接訪問文件瀏覽器。保留爲$_GET。當您瀏覽到getFanLoc.php?zipcode=XXX其中XXX是已知存在的代碼時會發生什麼？你有什麼結果嗎？

此外，假設您使用的是this plugin，您應該返回JSON而不是超鏈接的負載 - 插件會將它們封裝在HTML中供您使用。