zoukankan      html  css  js  c++  java
  • 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;  300px; overflow: auto;" class="ui-widget-content"></div>
    </div>
            
            
        </body>
    </html>

  • 相关阅读:
    片段
    告诉长夜
    明天
    开源一个WEB版本GEF,基于SVG的网页流程图框架
    RCP:ISourceLocator翻译
    SVG:textPath深入理解
    SVG:linearGradient渐变在直线上失效的问题解决方案
    【半平面交】BZOJ2618[Cqoi2006]凸多边形
    【旋转卡壳+凸包】BZOJ1185:[HNOI2007]最小矩形覆盖
    【凸包+旋转卡壳】平面最远点对
  • 原文地址:https://www.cnblogs.com/weiqinshian/p/5070326.html
Copyright © 2011-2022 走看看