您的位置：首页 > Web前端 > JQuery

jquery autocomplete插件结合ajax使用

2015-12-23 16:24 736 查看

<%@ page isELIgnored="false"%>
<%@ page contentType="text/html; charset=UTF-8"%>
<%@ page import="com.sunny.common.utils.StringUtil"%>
<%@ include file="/common/taglibs.inc"%>
<%@ page import="com.sunny.base.Convertutf"%>
<html>
<head>
<title>商品管理</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" href="/newver/js/jqueryAutocomplete/ui/jquery.ui.all.css">
<script src="/newver/js/jqueryAutocomplete/jquery-1.10.2.js"></script>
<script src="/newver/js/jqueryAutocomplete/ui/jquery.ui.core.js"></script>
<script src="/newver/js/jqueryAutocomplete/ui/jquery.ui.widget.js"></script>
<script src="/newver/js/jqueryAutocomplete/ui/jquery.ui.position.js"></script>
<script src="/newver/js/jqueryAutocomplete/ui/jquery.ui.menu.js"></script>
<script src="/newver/js/jqueryAutocomplete/ui/jquery.ui.autocomplete.js"></script>

<link rel="stylesheet" href="/newver/js/jqueryAutocomplete/ui/demos.css">

<script  type="text/javascript"  language=javascript>

$(function() {
function diseaseLabel( message ) {
$( "<div>" ).text( message ).prependTo( "#diseaseLabel" );
$( "#diseaseLabel" ).scrollTop( 0 );
}

$( "#tags" ).autocomplete({
source: function( request, response ) {
$.ajax({
url: "merchandise!JibingList.html2",
dataType: "json",
data: {
name_startsWith: request.term
},
success: function( data ) {
response( $.map( data, function( item ) {
return {
label: item.name
}
}));
}
});
},
minLength: 2,
select: function( event, ui ) {

// $("#diseaseLabel").val(ui.item.value);

diseaseLabel( ui.item ?
"Selected: " + ui.item.value :
"Nothing selected, input was " + ui.item.value);
},
open: function() {
$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
},
close: function() {
$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
}
});
});

</script>
</head>
<body>

<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="diseaseLabel" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航