我想知道是否有人知道是否可以使用库JQuery UI Autocomplete与数据库。非常相似,但源代码中有数据库:
$(function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#tags" ).autocomplete({
source: availableTags
});
});
发布于 2018-12-14 13:41:21
是的你可以。您必须首先通过API获取结果。浏览器中的JavaScript不会(也不应该)直接与数据库对话。
API(托管在某个服务器上)将从浏览器接收请求,从数据库中获取数据,然后将其返回给浏览器。它还应该做一些事情,比如验证请求以确保它不包含潜在的有害或恶意代码(即SQL注入),如果数据是敏感的,它应该处理访问控制(即如果他们不应该有人拒绝访问它)。
发布于 2018-12-14 15:30:17
带有源代码的Autocomplete文档中非常好的示例。
jQuery的
<script>
$(function() {
function log( message ) {
$( "<div>" ).text( message ).prependTo( "#log" );
$( "#log" ).scrollTop( 0 );
}
$( "#city" ).autocomplete({
source: function( request, response ) {
$.ajax({
url: "http://gd.geobytes.com/AutoCompleteCity",
dataType: "jsonp",
data: {
q: request.term
},
success: function( data ) {
response( data );
}
});
},
minLength: 3,
select: function( event, ui ) {
log( ui.item ?
"Selected: " + ui.item.label :
"Nothing selected, input was " + this.value);
},
open: function() {
$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
},
close: function() {
$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
}
});
});
</script>
HTML
<div class="ui-widget">
<label for="city">Your city: </label>
<input id="city">
Powered by <a href="http://geonames.org">geonames.org</a>
</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>
https://stackoverflow.com/questions/-100006288
复制相似问题