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)  编辑  收藏  举报