jQuery UI自動完成無法弄清楚

我決定使用jQuery UI作爲與插件相對的自動完成功能，因爲我讀過這些插件已被棄用。我的總體目標是擁有一個自動完成搜索欄，它可以擊中我的數據庫，並以類似於google的方式向用戶返回城市/州或郵編的建議。截至目前，我甚至不確定.autocomplete函數是否被調用。我抓住了我所有的一切，並決定從基礎開始。我從http://jqueryui.com/download下載了最新版本的jQuery UI，並試圖獲得他們在此使用的示例http://jqueryui.com/demos/autocomplete/。我所包含的所有腳本似乎都通過Dreamworks連接起來，所以我相當肯定我所包含的路徑是正確的。我所包含的CSS和Javascript在下載時是不變的。以下是我的HTML代碼和返回JSon格式化數據的後端PHP代碼。請幫幫我。也許我需要包含一個處理JSon返回數據的函數，但我試圖遵循該示例，儘管我看到他們使用了本地數組。jQuery UI自動完成無法弄清楚

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 


<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>jQueryUI Demo</title> 
<link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.17.custom.css" type="text/css" /> 
<script type="text/javascript" src ="js/jquery-1.7.1.min.js"></script> 
<script type="text/javascript" src ="js/jquery-ui-1.8.17.custom.min.js"></script> 
</script> 


<script type="text/javascript"> 


$(document).ready(function() { 
    $("#tags").autocomplete({ 
     source: "search_me.php" 
    }); 
}); 
</script> 
</head> 

<body> 
<div class="demo"> 

<div class="ui-widget"> 
    <label for="tags">Tags: </label> 
    <input id="tags" /> 
</div> 

</div><!-- End demo --> 



<div class="demo-description"> 
<p>The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are tags for programming languages, give "ja" (for Java or JavaScript) a try.</p> 
<p>The datasource is a simple JavaScript array, provided to the widget using the source-option.</p> 
</div><!-- End demo-description --> 
</body> 
</html>

下面的PHP部分。

<?php 
include 'fh.inc.db.php'; 

$db = mysql_connect(MYSQL_HOST, MYSQL_USER, MYSQL_PASSWORD) or 
    die ('Unable to connect. Check your connection parameters.'); 
mysql_select_db(MYSQL_DB, $db) or die(mysql_error($db)); 

$location = htmlspecialchars(trim($_GET['term'])); //gets the location of the search 

$return_arr = array(); 

if(is_numeric($location)) { 

    $query = "SELECT 
     zipcode_id 
    FROM 
     user_zipcode 
    WHERE 
     zipcode_id REGEXP '^$location' 
     ORDER BY zipcode_id DESC LIMIT 10"; 
    $result = mysql_query($query, $db) or die(mysql_error($db)); 

    while($row = mysql_fetch_assoc($result)) { 

    extract($row); 
    $row_array['zipcode_id'] = $zipcode_id; 

    array_push($return_arr, $row_array); 


    } 
} 

mysql_close($db); 
echo json_encode($return_arr); 
?>

感謝您的意見。這是一個更新。

我檢查了xhr使用螢火蟲，並確保它是響應謝謝你的提示。還有上面的PHP代碼，我沒有初始化$ return_arr，所以我照顧了。還要感謝澄清js所需或不需要的。現在，當我輸入一個郵政編碼時，一個釐米左右的小盒子出現在它的下面，但我看不出有什麼東西在那裏，我猜不會。我去我的PHP頁面，並設置它來手動設置變量爲「9408」，並通過我的瀏覽器直接加載PHP頁面，看看它返回什麼。這就是它返回的結果。

[{"zipcode_id":"94089"},{"zipcode_id":"94088"},{"zipcode_id":"94087"},{"zipcode_id":"94086"},{"zipcode_id":"94085"},{"zipcode_id":"94083"},{"zipcode_id":"94080"}]

然後我去了一個JSON代碼驗證在此URL http://jsonformatter.curiousconcept.com/它告訴我，我的代碼就是返回JSON格式的數據。再有建議來幫助我解決問題將會非常棒。

哇，經過更多的研究後，我偶然發現別人的帖子上的答案。 jquery autocomplete not working with JSON data

幾乎JSON返回的數據必須包含標籤或值或兩者。將zipcode_id切換到我的$ row_array中的值，然後......熱潮就爆炸了！

來源

2012-01-25 noWayhome

使用螢火蟲或Chrome瀏覽器開發工具，看看你的XHR請求實際上是被製成 – kinakuta

腳本（js文件）的引用是不正確的，應該只是：

<!-- the jquery library -->  
<script type="text/javascript" src ="js/jquery-1.7.1.min.js"></script> 
<!-- the full compressed and minified jquery UI library --> 
<script type="text/javascript" src ="js/jquery-ui-1.8.17.custom.min.js"></script>

檔「jquery.ui.core.js」，「jquery.ui.widget.js」和「jQuery的.ui.position.js「是分開的開發文件，jquery ui庫被分割成模塊。

文件「jquery-ui-1.8.17.custom.min.js」包含它們全部，壓縮和縮小！

關於數據源，作爲自動填充文檔的「概述」部分中所述：使用一個URL時，它必須返回JSON數據，任一形式的：

字符串簡單的數組：['string1', 'string2', ...]
或對象數組與標籤（和一個值 - optionnal）屬性[{ label: "My Value 1", Value: "AA" }, ...]

我真的不熟悉PHP所以只要確保你的PHP腳本返回那些:-)之一

來源

2012-01-25 08:14:47

感謝您的意見我更新了上面的情況。至於檢查標記，我應該檢查一旦你給了我一個答案或者一旦問題解決了嗎？我是這個網站的新手。再次感謝！ – noWayhome

查看[常見問題]（http://stackoverflow.com/faq#howtoask）;-) –

jQuery UI自動完成無法弄清楚

回答

相關問題