如何使用數據庫創建可編輯的組合框？

-1

我是java新手，想創建一個可編輯的組合框，當用戶鍵入它時，結果來自數據庫。如何使用數據庫創建可編輯的組合框？

就像我在組合框中鍵入「e」那麼所有以「e」開頭的名字都應該來自數據庫。

請舉個簡單的例子。

2015-04-05 vishwas shrivastava

你可以使用jQuery插件，下面的例子是爲php只是用java代碼替換php部分，或者看看this。

使用JSON

$(document).ready(function() { 
     $(function() { 
       $("#search").autocomplete({  
       source : function(request, response) { 
       $.ajax({ 
         url : "SearchController", 
         type : "GET", 
         data : { 
           term : request.term 
         }, 
         dataType : "json", 
         success : function(data) { 
           response(data); 
         } 
       }); 
     } 
}); 
}); 
});

隨着DB

<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI Autocomplete - Remote datasource</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"> 
<style> 
.ui-autocomplete-loading { 
background: white url("images/ui-anim_basic_16x16.gif") right center no-repeat; 
} 
</style> 
<script> 
$(function() { 
function log(message) { 
$("<div>").text(message).prependTo("#log"); 
$("#log").scrollTop(0); 
} 
$("#birds").autocomplete({ 
source: "search.php", 
minLength: 2, 
select: function(event, ui) { 
log(ui.item ? 
"Selected: " + ui.item.value + " aka " + ui.item.id : 
"Nothing selected, input was " + this.value); 
} 
}); 
}); 
</script> 
</head> 
<body> 
<div class="ui-widget"> 
<label for="birds">Birds: </label> 
<input id="birds"> 
</div> 
<div class="ui-widget" style="margin-top:2em; font-family:Arial"> 
Result: 
<div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div> 
</div> 
</body> 
</html>

來源

2015-04-05 10:10:56 Jack

如何使用數據庫創建可編輯的組合框？

回答

相關問題