jquery UIèªå¨å®æajax没æå¡«å ä¸ææ¡
问题描述:
æéè¦å¸®å©ï¼æçä¸åºé®é¢å¨åªéãjquery UIèªå¨å®æajax没æå¡«å ä¸ææ¡
å½æå¨htmlæ件ä¸è®¾ç½®èªå¨å®æçæºä»£ç æ¶ï¼å®å·¥ä½æ£å¸¸ï¼å½æå¨ajax.phpä¸æå°åºç¸åçæºææ°æ®åºå¼å¹¶éè¿ajaxè¿åæ¶å®ä¸èµ·ä½ç¨ãå¯è½æ¯ä»ä¹é®é¢å¢ï¼è¯·å¸®å©ã
HTMLï¼
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Auto complete</title>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.18.custom.min.js"></script>
<link rel="stylesheet" media="all" type="text/css" href="jquery-ui-1.8.custom.css" />
<style type="text/css">
.ui-autocomplete-loading {
background: url("images/loader.gif") no-repeat scroll right center white;
}
</style>
<script type="text/javascript">
jQuery(document).ready(function($){
$("#ac").autocomplete({
minLength: 2,
//source: [{"value":"Some Name","id":1},{"value":"Some Othername","id":2}]
source: function(request, response){
$.ajax({
type: 'GET',
url: 'ajax.php',
data: {
'term':request.term
},
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data){
console.log('Success : ' + data);
},
error: function(message){
alert(message);
}
});
},
select: function(event, ui) {
}
});
});
</script>
</head>
<body>
<input type="text" id="ac" name="ac" size="100" />
</body>
</html>
åæçajax.phpæ件ï¼
$dbhost = 'localhost';
$dbuser = 'root';
$dbpass = '';
$dbname = 'test_db';
$server = mysql_connect($dbhost, $dbuser, $dbpass);
$connection = mysql_select_db($dbname, $server);
$term = $_GET['term'];
$qstring = "SELECT user_id,tName FROM `csv_data` WHERE tName LIKE '%" . $term . "%'";
$result = mysql_query($qstring);
$return_arr = array();
$i = 0;
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {//loop through the retrieved values
$row_a = array();
if ($row['tName'] != null) {
$i++;
$row_a['value'] = ($row['tName']);
$row_a['id'] = (int) $i;
array_push($return_arr, $row_a);
}
}
mysql_close($server);
header("Content-type: text/x-json");
/*$my_arr = array(
array("value" => "Some Name", "id" => 1),
array("value" => "Some Othername", "id" => 2)
);*/
//echo json_encode($return_arr);
print json_encode($return_arr);
//print json_encode($my_arr);
è¿æ¯ä»è¤ç«è«ååºï¼æ¥èªæ°æ®åºçæï¼ã
[{"value":"4 erste Spiele","id":1},{"value":"Meine ersten Spiele \"Blinde Kuh\"","id":2},{"value":"4 erste Spiele","id":3},{"value":"Meine ersten Spiele \"Blinde Kuh\"","id":4},{"value":"4 erste Spiele","id":5},{"value":"Meine ersten Spiele \"Blinde Kuh\"","id":6},{"value":"Maxi Kleine Spielewelt","id":7}]
答
åæ°response
å®é
ä¸æ¯tthatä½ å¿
é¡»è°ç¨åè° - ä¼ éä½ çæ°æ® - æ¾ç¤ºç»æå¼¹åºèåãåªéå¨âæåâåè°ä¸è°ç¨å®å³å¯ï¼
source: function(request, response) {
$.ajax({
...
success: function(data) {
// pass your data to the response callback
response(data);
},
error: function(message) {
// pass an empty array to close the menu if it was initially opened
response([]);
}
});
},
å¨ï¼è°¢è°¢ï¼æç®ç´ä¸æ¢ç¸ä¿¡æ没æçå°ãæè°¢æ¨ç帮å©ã â user147 2012-02-28 12:40:39
å¾é«å ´å¸®å©ï¼ :-) â 2012-02-28 12:41:34