jquery autocomplete插件结合ajax使用
<%@ 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>
posted on 2015-12-23 16:24 weiqinshian 阅读(364) 评论(0) 编辑 收藏 举报