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>

  • 相关阅读:
    DataBindings 与 INotifyPropertyChanged 实现自动刷新 WinForm 界面
    EasyInvoice 使用教程
    下载网页通用类
    c#操作excel的一些记录
    sql数据库基础知识整理,常用函数及常用语法
    动态行转列 pivot实现
    EFCodeFirst 数据迁移问题~
    asp.net 翻页时用ViewState保存上一页checkbox勾选的值
    参数化拼接in查询条件,个人备份
    retry
  • 原文地址:https://www.cnblogs.com/weiqinshian/p/5070326.html
Copyright © 2011-2022 走看看