[英]How to make the autocomplete Jquery UI plugin dynamic
我從這里使用Jquery UI自動完成插件。 問題是,如何將動態內容插入自動完成功能? 這是我嘗試過的:
<?php
$db2 = new mysqli("127.0.0.1", "root", "", "crave crap");
$one_grab = $db2->query("SELECT * FROM movies");
echo '<script>
$(function() {
var availableTags = [
</script>';
while($two_row = mysqli_fetch_array($one_grab)) {
echo $two_row["title"];
}
echo '"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$("#delete_movie").autocomplete({
source: availableTags
});
});
</script>';
?>
請假設Jquery和Jquery UI已正確鏈接...為了進一步說明,我有一個while循環連接到SQL查詢。 我試圖將其附加到自動完成內容中,但這不起作用。 用Jquery UI自動完成插件執行此操作的正確方法是什么?
編輯@Vijay Arun
這是您發布的代碼:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<?php
$db2 = new mysqli("127.0.0.1", "root", "", "crave crap");
$one_grab = $db2->query("SELECT * FROM movies");
while($two_row = mysqli_fetch_array($one_grab)) {
$data[] = $two_row["title"];
}
?>
<script>
$(function() {
var availableTags = "<?php echo json_encode($data); ?>";
$("#delete_movie").autocomplete({
source: JSON.parse(availableTags)
});
});
</script>
</head>
<body>
<div class="ui-widget">
<input id="delete_movie" name="delete_movie" required>
</div>
</body>
</html>
這看起來正確嗎? 如果是這樣,代碼仍然無法正常工作...
使用remote
示例,在php
echo json_encode()
$("#delete_movie").autocomplete({
source: function( request, response ) {
$.ajax({
url: "/path/to/php",
dataType: "json",
data: {
q: request.term
},
success: function( data ) {
response( data );
}
});
})
您需要兩個單獨的文件, index.php
和suggest.php
index.php
<div class="ui-widget">
<input id="delete_movie" name="delete_movie" required>
</div>
<script>
$(function() {
$( "#delete_movie" ).autocomplete({
source: "suggest.php"
});
</script>
suggest.php
<?php
$db2 = new mysqli("127.0.0.1", "root", "", "crave crap");
$one_grab = $db2->query("SELECT * FROM movies WHERE title LIKE '%{$_GET['term']}%' ");
while($two_row = mysqli_fetch_array($one_grab)) {
$data[] = $two_row["title"];
}
echo json_encode( $data );
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.