servlet-mapping元素及其子元素

<servlet-mapping> <servlet-name>helloworld</servlet-name> <url-pattern>/hello</url-pattern> </servlet-mapping>

        Servlet 2.5規(guī)范允許<servlet-mapping>的<url-pattern>子元素出現(xiàn)多次，之前的規(guī)范只允許一個<servlet-mapping>元素包含一個<url-pattern>子元素。我們看下面的例子：

<servlet-mapping> <servlet-name>welcome</servlet-name> <url-pattern>/en/welcome</url-pattern> <url-pattern>/zh/welcome</url-pattern> </servlet-mapping>

       在配置了Servlet與URL樣式之間的映射后，當Servlet容器接收到一個請求，它首先確定該請求應該由哪一個Web應用程序來響應。這是通過比較請求URI的開始部分與Web應用程序的上下文路徑來確定的。映射到Servlet的路徑是請求URI減去上下文的路徑，Web應用程序的Context對象在去掉請求URI的上下文路徑后，將按照下面的路徑映射規(guī)則的順序?qū)κＳ嗖糠值穆窂竭M行處理，并且在找到第一個成功的匹配后，不再進行下一個匹配。

      容器試著對請求的路徑和Servlet映射的路徑進行精確匹配，如果匹配成功，則調(diào)用這個Servlet來處理請求。

      容器試著匹配最長的路徑前綴，以斜杠（/）為路徑分隔符，按照路徑樹逐級遞減匹配，選擇最長匹配的Servlet來處理請求。

      如果請求的URL路徑最后有擴展名，如.jsp，Servlet容器會試著匹配處理這個擴展名的Servlet。

       如果按照前面3條規(guī)則沒有找到匹配的Servlet，容器會調(diào)用Web應用程序默認的Servlet來對請求進行處理，如果沒有定義默認的Servlet，容器將向客戶端發(fā)送HTTP 404錯誤信息（請求資源不存在）。

posted @ 2012-05-22 20:32 youngturk 閱讀(18510) | 評論 (1) | 編輯 收藏

web.xml中servlet控制參數(shù)方法

web.xml中servlet：

    <servlet>   <!--接著順序加載servlet被初始化-->
           <!-- servlet獲得控制文件Class的名字，類名 -->
        <servlet-name>smvcCoreDispatcher</servlet-name>
        <servlet-class>org.bluechant.mvc.core.CoreDispatcherController</servlet-class>
        <init-param>
            <param-name>templateLoaderPath</param-name>
            <param-value>/WEB-INF/view</param-value>
        </init-param>
        <init-param>
            <param-name>defaultEncoding</param-name>
            <param-value>GBK</param-value>
        </init-param>
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>/WEB-INF/smvc_config/smvc-config.xml</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup><!-- 加載路徑 -->
    
     </servlet>
    <servlet-mapping>
        <servlet-name>smvcCoreDispatcher</servlet-name>
        <url-pattern>*.do</url-pattern>
    </servlet-mapping>
    
    <welcome-file-list>
        <welcome-file>login.html</welcome-file>
    </welcome-file-list>

web.xml對應的servlet控制java改寫：

package org.bluechant.mvc.core;

import java.io.IOException;
import java.io.PrintWriter;
import java.io.UnsupportedEncodingException;
import java.lang.reflect.Method;
import java.util.Enumeration;
import java.util.Locale;
import java.util.Map;

import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.log4j.Logger;
import org.bluechant.mvc.controller.ModelAndView;
import org.bluechant.mvc.core.util.ServletUtils;

import freemarker.template.Configuration;
import freemarker.template.ObjectWrapper;
import freemarker.template.Template;
import freemarker.template.TemplateException;
import freemarker.template.TemplateExceptionHandler;

public class CoreDispatcherController extends HttpServlet {
    
    private Logger logger = Logger.getLogger(CoreDispatcherController.class);
    
    private CacheManager cache ;
    
    private String baseControllerClass = "org.bluechant.mvc.controller.Controller";

    private static final long serialVersionUID = 1L;
    
    private Configuration cfg ;
    
    private String templateLoaderPath ;
    
    private String defaultEncoding ;    
    
    private String contentType ;

    private String contextConfigLocation ;
    
    private ActionConfig actionCoinfig ;    
    
    public void init(ServletConfig config) throws ServletException {
        
        super.init(config);
        //super.init(config);

        String absPath = config.getServletContext().getRealPath("/");//獲得系統(tǒng)絕對路徑
        System.out.println("absPath:"+absPath);
        //getRealPath("/virtual_dir/file2.txt")應該返回"C:\site\a_virtual\file2.txt" 　　getRealPath("/file3.txt")應該返回null，因為這個文件不存在。 
        ///返回路徑D:\Java\workspaces\helios\newshpt\獲得文件路徑
        defaultEncoding = getInitParameter("defaultEncoding");
        
        templateLoaderPath = getInitParameter("templateLoaderPath");
        //");//從web.xml中獲得templateLoaderPath信息，web.xml中對應的路徑”/WEB-INF/view“
        
        contextConfigLocation = getInitParameter("contextConfigLocation");
        System.out.println("contextConfigLocation:"+contextConfigLocation);
        ///獲得web.xml文件中路徑WEB-INF/smvc_config/smvc-config.xml
        actionCoinfig = new ActionConfig();
        actionCoinfig.load(absPath+contextConfigLocation);//文檔進行解析與讀取,
        ///D:\Java\workspaces\helios\newshpt\WEB-INF/smvc_config/smvc-config.xml
        contentType = "text/html;charset="+defaultEncoding ;
        
        //創(chuàng)建Configuration實例，Configuration是入口，通過它來獲得配置文件
        cfg = new Configuration();
        //設(shè)置模板路徑， getServletContext(),所有是所有路徑都能拿到的..
        cfg.setServletContextForTemplateLoading(getServletContext(), templateLoaderPath);
        //cfg.setServletContextForTemplateLoading(arg0, arg1)
        //設(shè)置編碼格式
        cfg.setEncoding(Locale.getDefault(), defaultEncoding);
        
        //init cache manager
        cache = CacheManager.getInstance();
    }
    
    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        processRequest(request,response);
    }
    
    public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {    
        processRequest(request,response);
        
    }
    
    private void showRequestParams(HttpServletRequest request){
        Enumeration en = request.getParameterNames();
        while (en.hasMoreElements()) {
            String paramName = (String) en.nextElement();
            String[] paramValues = request.getParameterValues(paramName);
            if (paramValues.length == 1) {
                String paramValue = paramValues[0];
                if (paramValue.length() != 0) {
                    //map.put(paramName, paramValue);
                    //System.out.println(paramName+"\t"+paramValue);
                }
            }else if(paramValues.length >1 ){//checkbox
                //map.put(paramName, paramValues);
                //System.out.println(paramName+"\t"+paramValues);
            }
        }
    }
    
    public void processRequest(HttpServletRequest request, HttpServletResponse response){
        
        try {
            request.setCharacterEncoding(defaultEncoding);
            showRequestParams(request);//waiting back to resolve
        } catch (UnsupportedEncodingException e1) {
            // TODO Auto-generated catch block
            e1.printStackTrace();
        } // set request encoding
        
        ModelAndView mv = analyzeRequest(request);        
        try {
            invokeActionHandler(mv,request);
            if(mv.getViewPath().endsWith(".ftl")){
                invokeViewResolverHandler(mv , response , request);
            }else{
                response.sendRedirect(mv.getWebroot()+mv.getViewPath());
            }    
        } catch (Exception e) {
            e.printStackTrace();
        }    
    }
    
    public ModelAndView analyzeRequest(HttpServletRequest request){        
        ModelAndView modelAndView = new ModelAndView();            
        logger.debug("request url path is : "+request.getRequestURI());
        String requestPath = request.getRequestURI(); // /newshpt/account!login.do
        String webroot = request.getContextPath() ; // /newshpt
        System.out.println("request url path is : "+requestPath);
        System.out.println("request webroot path is : "+webroot);
        modelAndView.setWebroot(webroot);
        String actionFullName = requestPath.substring(webroot.length()); // /account!login.do
        System.out.println("actionFullName : "+actionFullName);
        String[] temp = actionFullName.split("!");
        String method = "execute";
        if(temp.length==2){
             method = temp[1].split("\\.")[0];
        }
        System.out.println("method : "+method);
        String actionName = temp[0]; // /demo
        System.out.println("actionName : "+actionName);
        String className = actionCoinfig.getClassName(actionName);
        System.out.println("className :"+className);
        modelAndView.setClassName(className);
        modelAndView.setMethodName(method);
        modelAndView.setAction(actionName);
        
        return modelAndView ;
    }
    
    /**
     * invoke the request controller's target method 
     * param ModelAndView will be mofified during the process
     * @param mv
     * @param request
     * @throws Exception 
     */
    public void invokeActionHandler(ModelAndView mv , HttpServletRequest request) throws Exception{
        String className = mv.getClassName();
        String methodName = mv.getMethodName();
        //load class
        Class controllerClass = cache.loadClass(className);
        Class parentControllerClass = cache.loadClass(baseControllerClass);
        //load method
        Method setRequest = cache.loadMethod(parentControllerClass, "setRequest", new Class[] { HttpServletRequest.class });    
        Method setModelAndView = cache.loadMethod(parentControllerClass, "setModelAndView", new Class[] { ModelAndView.class });//org.bluechant.mvc.controller.Controller-setModelAndView@6024418  public void org.bluechant.mvc.controller.Controller.setModelAndView(org.bluechant.mvc.controller.ModelAndView)
        Method targetMethod = cache.loadMethod(controllerClass, methodName, new Class[]{});
        //buiid controller instance and invoke target method
        Object instance = controllerClass.newInstance();
        setRequest.invoke(instance, new Object[] { request });//對帶有指定參數(shù)的指定對象調(diào)用由此 Method 對象表示的基礎(chǔ)方法    
        setModelAndView.invoke(instance, new Object[] { mv });
        targetMethod.invoke(instance, new Object[]{});        
    }
    
    /**
     * send data to view model , and generate the view page by FreeMarker
     */
    public void invokeViewResolverHandler(ModelAndView modelAndView , HttpServletResponse response ,HttpServletRequest request){    
        //convert session attributes to sessionModel , and push to modelAndView
        Map sessionModel = ServletUtils.sessionAttributesToMap(request.getSession());// userSources=[/admin, /button/custom, /custom, /delivery, /loadShip, /unloadPickUp, /unloadShip]
        modelAndView.put("Session", sessionModel);
        response.setContentType(contentType); 
        try {//初始化FreeMarker
            PrintWriter out = response.getWriter();
            Template template = cfg.getTemplate(modelAndView.getViewPath());//取得生成模版文件
            template.setTemplateExceptionHandler(TemplateExceptionHandler.DEBUG_HANDLER);//setTemplateExceptionHandler
            //set the object wrapper , beanwrapper is the perfect useful objectWrapper instance
            template.setObjectWrapper(ObjectWrapper.BEANS_WRAPPER);// 設(shè)置對象包裝器
            template.process(modelAndView, out);//模版環(huán)境開始載入..
            out.flush();
        } catch (IOException e) {
            e.printStackTrace();
        } catch (TemplateException e) {
            e.printStackTrace();
        }
    }
    
}

smvc-config.xml文件:

<?xml version="1.0" encoding="UTF-8"?>
<smvc-config>    
    <action name="/account" class="com.cenin.tjport.shpt.mvc.controller.AccountController"/>
    <action name="/yard" class="com.cenin.tjport.shpt.mvc.controller.DuiCunController"/>
</smvc-config>

posted @ 2012-05-22 15:08 youngturk 閱讀(1013) | 評論 (0) | 編輯 收藏

Method類

posted @ 2012-05-22 14:01 youngturk 閱讀(128) | 評論 (0) | 編輯 收藏

class類使用說明

posted @ 2012-05-22 13:42 youngturk 閱讀(145) | 評論 (0) | 編輯 收藏

getServletContext(),獲得servlet上下文

posted @ 2012-05-22 11:21 youngturk 閱讀(3172) | 評論 (0) | 編輯 收藏

dom4j學習轉(zhuǎn)

1.加載XML文檔
SAXReader reader = new SAXReader();
Document doc = reader.read("src/book.xml");

2.獲得根元素
Node root = doc.getRootElement();
     或 Element r = doc.getRootElement();

3.取得某節(jié)點的單個子節(jié)點
Element root = root.getRootElement();
Element memberElm=root.element("member");// "member"是節(jié)點名

4.取得節(jié)點的文字
String text=memberElm.getText();

5.取得某節(jié)點下名為"book"的所有字節(jié)點并進行遍歷
Element r = doc.getRootElement();
List titles = r.elements("book");
for(int i=0;i<titles.size();i++){
     System.out.println(((Element)titles.get(i)).asXML());
}
6.在某節(jié)點下添加子節(jié)點.
Element ageElm = newMemberElm.addElement("age");

7.設(shè)置節(jié)點文字.
ageElm.setText("29");

8.刪除某節(jié)點.
parentElm.remove(childElm);// childElm是待刪除的節(jié)點,parentElm是其父節(jié)點

三.屬性相關(guān).
1.取得某節(jié)點下的某屬性
            Element root=document.getRootElement();   
            Attribute attribute=root.attribute("size");// 屬性名name
2.取得屬性的文字
            String text=attribute.getText();
也可以用:
String text2=root.element("name").attributeValue("firstname");這個是取得根節(jié)點下name字節(jié)點的屬性firstname的值.

3.遍歷某節(jié)點的所有屬性
            Element root=document.getRootElement();   
            for(Iterator it=root.attributeIterator();it.hasNext();){
                Attribute attribute = (Attribute) it.next();
                String text=attribute.getText();
                System.out.println(text);
            }
4.設(shè)置某節(jié)點的屬性和文字.
newMemberElm.addAttribute("name", "sitinspring");
5.設(shè)置屬性的文字
            Attribute attribute=root.attribute("name");
            attribute.setText("sitinspring");
6.刪除某屬性
            Attribute attribute=root.attribute("size");// 屬性名name
            root.remove(attribute);
四.將文檔寫入XML文件.
1.文檔中全為英文,不設(shè)置編碼,直接寫入的形式.
XMLWriter writer = new XMLWriter(new FileWriter("output.xml"));
writer.write(document);
writer.close();
2.文檔中含有中文,設(shè)置編碼格式寫入的形式.
            OutputFormat format = OutputFormat.createPrettyPrint();
            format.setEncoding("GBK");    // 指定XML編碼       
            XMLWriter writer = new XMLWriter(new FileWriter("output.xml"),format);
           
            writer.write(document);
            writer.close();
五.字符串與XML的轉(zhuǎn)換
1.將字符串轉(zhuǎn)化為XML
String text = "<members> <member>sitinspring</member> </members>";
Document document = DocumentHelper.parseText(text);
2.將文檔或節(jié)點的XML轉(zhuǎn)化為字符串.
            SAXReader reader = new SAXReader();
            Document document = reader.read(new File("input.xml"));           
            Element root=document.getRootElement();               
            String docXmlText=document.asXML();
            String rootXmlText=root.asXML();
            Element memberElm=root.element("member");
            String memberXmlText=memberElm.asXML();
六.使用XPath快速找到節(jié)點.
讀取的XML文檔示例
<?xml version="1.0" encoding="UTF-8"?>
<projectDescription>
<name>MemberManagement</name>
<comment></comment>
<projects>
    <project>PRJ1</project>
    <project>PRJ2</project>
    <project>PRJ3</project>
    <project>PRJ4</project>
</projects>
<buildSpec>
    <buildCommand>
      <name>org.eclipse.jdt.core.javabuilder</name>
      <arguments>
      </arguments>
    </buildCommand>
</buildSpec>
<natures>
    <nature>org.eclipse.jdt.core.javanature</nature>
</natures>
</projectDescription>

使用XPath快速找到節(jié)點project.
public static void main(String[] args){
    SAXReader reader = new SAXReader();
   
    try{
      Document doc = reader.read(new File("sample.xml"));
     
      List projects=doc.selectNodes("/projectDescription/projects/project");
     
      Iterator it=projects.iterator();
     
      while(it.hasNext()){
        Element elm=(Element)it.next();      
        System.out.println(elm.getText());
      }
     
    }
    catch(Exception ex){
       ex.printStackTrace();
    }
}

posted @ 2012-05-22 10:52 youngturk 閱讀(171) | 評論 (0) | 編輯 收藏

json格式學習筆記

1. 什么是 JSON

      JSON概念很簡單，JSON 是一種輕量級的數(shù)據(jù)格式，他基于 javascript 語法的子集，即數(shù)組和對象表示。由于使用的是 javascript 語法，因此JSON 定義可以包含在javascript 文件中，對其的訪問無需通過基于 XML 的語言來額外解析。不過在使用 JSON 之前，很重要的一點是理解 javascript 中數(shù)組及對象字面量的特殊語法。

1.1 數(shù)組字面量

         數(shù)組字面量，是用一對方括號括起一組用逗號隔開的 javascript 值，例如：

        var aNames=["hello", 12, true , null];

1.2 對象字面量

        對象字面量，是通過兩個花括號來定義的。在花括號內(nèi)可以放置任意數(shù)量的“名稱-值”對，定義格 式字符串值”。除了最后一行外，每個“名稱-值”對后必須有一個逗號（這與Perl 中的聯(lián)合數(shù)組的定義有些類似）。例如：

        var oCar = {

               "color": "red",       

              "doors" : 4,

               "paidFor" : true

        };

1.3 混合字面量

      我們可以混用對象和數(shù)組字面量，來創(chuàng)建一個對象數(shù)組，或一個包含數(shù)組的對象。例如：

{comments:[
{
id:1,
author:"someone1",
url:"http://someone1.x2design.net",
content:"hello"
},
{
id:2,
author:"someone2",
url:"http://someone2.x2design.net",
content:"hello"
},
{
id:3,
author:"someone3",
url:"http://someone3.x2design.net",
content:"hello"
}
]};

1.4 JSON 語法

      在Ajax應用中，就是服務器直接生成javascript語句，客戶端獲取后直接用eval方法來獲得這個對象，這樣就可以省去解析XML的性能損失。 同時，在javascript 通信中使用JSON作為數(shù)據(jù)格式的好處很明星，可以立即獲得數(shù)據(jù)的值，因此可以更快的訪問其中包含的數(shù)據(jù)。

      var oCarInfo = eval("(" + sJSON + ")");

請記住：在javascript中花括號也是一個語句。要讓解析器知道這個花括號表示的是一個對象而非一個語句的唯一方法是能否找到封裝它的圓括號（它是用來說明代碼是一個表達式而非一個語句）。

1.5 JSON 編碼和解碼

       作為 JSON 資源的一部分，Corockford 開發(fā)了一個能夠?qū)崿F(xiàn) JSON 和Javascript 對象直接解碼和編碼的工具。這個工具的源程序可以在 www.crockford.com/JSON/json.js 中下載。

       在上面提出用到eval() 存在些固有的不足：它是用來對傳入的任何 Javascript 代碼求值的，而不僅僅針對JSON。因此，當涉及企業(yè)級 web 應用程序開發(fā)時，它存在很大的安全隱患。為了解決這個問題，可以使用只用來將 JSON 代碼轉(zhuǎn)換為 Javascript 的解析器 JSON.parse() 方法來實現(xiàn)。例如：

       var oObject = JSON.parse (sJSON);

       同時，它也提供了一種將 Javascript 對象轉(zhuǎn)換為 JSON 字符串（數(shù)據(jù)傳輸時使用的）的工具（在Javascript 中沒有內(nèi)建這種功能支持）。你要做的只是將對象傳入到 JSON.Stringify() 方法。請看下面的例子：

       var oCar = new Object();

       oCar.doors = 4;

        oCar.color = "blue";

       oCar.year = 1995;

       oCar.drivers = new Array("Penny", "Dan" , "Kris");

       document.write(JSON.stringify(oCar));

這段代碼將輸出如下所示的JSON 字符串：

{"doors" : 4, "color" : "blue", "year" :1995, "drivers" : ["Penny", "Dan" , "Kris"]}

2. JSON 與 XML

       正如上面所說，JSON 與 XML 相比的一大優(yōu)點就是它更加簡單。

請看 XML 數(shù)據(jù)表示實例：

使用XML表示：

<comments>
<comment>
<id>1</id>
<author>someone1</author>
<url>http://someone1.x2design.net</url>
<content>hello</content>
</comment>
<comment>
<id>2</id>
<author>someone2</author>
<url>http://someone2.x2design.net</url>
<content>someone1</content>
</comment>
<comment>
<id>3</id>
<author>someone3</author>
<url>http://someone3.x2design.net</url>
<content>hello</content>
</comment>
</comments>

使用JSON表示：

{comments:[
{
id:1,
author:"someone1",
url:"http://someone1.x2design.net",
content:"hello"
},
{
id:2,
author:"someone2",
url:"http://someone2.x2design.net",
content:"hello"
},
{
id:3,
author:"someone3",
url:"http://someone3.x2design.net",
content:"hello"
}
]};

       很容易發(fā)現(xiàn)，許多冗余的信息不見了。由于不需要有與開始標簽（opening tag）匹配的結(jié)束標簽（closing tag），因此傳送相同的信息所需的字節(jié)數(shù)大大降低了。創(chuàng)始人 Corockford 將其稱之為“XML 的減肥方案”）。

        JSON 格式的數(shù)據(jù)與 XML 相比，缺點是對于外行人可讀性更差。當然，有一種觀點是，數(shù)據(jù)交換格式不是用肉眼觀察的。如果是通過工具對來回傳送的數(shù)據(jù)進行創(chuàng)建和解析，那么的確沒有理 由要求數(shù)據(jù)必須使人們易于閱讀。問題的實質(zhì)在于：存在可用的 JSON 工具。

3. 服務器端 JSON 工具

java ：java JSON 工具，由Douglas Crock ford 開發(fā)，可在 www.crockford.com/JSON/java/

           中下載，它可以在 JSP 中使用。

4. JSON 優(yōu)勢與缺點

       JSON不僅減少了解析XML解析帶來的性能問題和兼容性問題，而且對于javascript來說非常容易使用，可以方便的通過遍歷數(shù)組以及訪問對象屬性 來獲取數(shù)據(jù)，其可讀性也不錯，基本具備了結(jié)構(gòu)化數(shù)據(jù)的性質(zhì)。不得不說是一個很好的辦法，而且事實上google maps就沒有采用XML傳遞數(shù)據(jù)，而是采用了JSON方案。

       JSON 另外一個優(yōu)勢是跨域可行性，例如你在www.xxx.com的網(wǎng)頁里使用是完全可行的，這就意味著你可以跨域傳遞信息。而使用XMLHttpRequest卻獲取不了跨域的信息，這是javascript內(nèi)部的安全性質(zhì)所限制的。

       JSON看上去很美，是不是就能完全取代XML呢？事實并非如此，而原因就在于XML的優(yōu)勢：通用性。要使服務器端產(chǎn)生語法合格的javascript代 碼并不是很容易做到的，這主要發(fā)生在比較龐大的系統(tǒng)，服務器端和客戶端有不同的開發(fā)人員。它們必須協(xié)商對象的格式，這很容易造成錯誤。

posted @ 2012-05-19 09:27 youngturk 閱讀(577) | 評論 (0) | 編輯 收藏

Java 讀寫json格式的文件方法詳解

posted @ 2012-05-19 09:09 youngturk 閱讀(1449) | 評論 (0) | 編輯 收藏

json 解析ajax

posted @ 2012-05-19 00:36 youngturk 閱讀(414) | 評論 (0) | 編輯 收藏

Ajax 實現(xiàn)函數(shù) autocomplete

<html xmlns="http://www.w3.org/1999/xhtml">
 <head id="Head1" runat="server">
     <title>AutoComplate</title>
     <script type="text/javascript" src="js/jquery.min.js"></script>
     <script type="text/javascript" src="js/jquery.autocomplete.min.js"></script>
   
    <link rel="Stylesheet" href="js/css/jquery.autocomplete.css" /> 
   
     <script type="text/javascript">
         $(function() {

           var emails = [

                { name: "Peter Pan", to: "peter@pan.de" },

                { name: "Molly", to: "molly@yahoo.com" },

                { name: "Forneria Marconi", to: "live@japan.jp" },

                { name: "Master <em>Sync</em>", to: "205bw@samsung.com" },

                { name: "Dr. <strong>Tech</strong> de Log", to: "g15@logitech.com" },

                { name: "Don Corleone", to: "don@vegas.com" },

                { name: "Mc Chick", to: "info@donalds.org" },

                { name: "Donnie Darko", to: "dd@timeshift.info" },

                { name: "Quake The Net", to: "webmaster@quakenet.org" },

                { name: "Dr. Write", to: "write@writable.com" }

                ];
                        
             $('#content').autocomplete(emails,
             {
                width :400,
                formatItem: function (row, i, max) {  
                 //   var row=eval("("+row+")");//將JSON轉(zhuǎn)換成對象   
                    return "<table><tr><td align='left'>" + row.name + "</td><td align='right'>約" + row.to + "個寶貝</td></tr></table>";

                 },
                formatMatch: function(row, i, max){
                   // var obj=eval("("+row+")");//將JSON轉(zhuǎn)換成對象   
                     return row.name + " " + row.to;

                } ,

                formatResult: function(row, i, max) {
                  
                      return row.to;

                  }                
             });
        

         
           //此處為動態(tài)查詢數(shù)據(jù)例子  （返回Json）
             $("#keyword").autocomplete("default6.aspx", {
                        minChars: 0, 
                        max:10, 
                        width: 400,
                        matchCase:false,//不區(qū)分大小寫
                      //  matchContains :true,
                       // autoFill: false,
                        scroll: false,
                        dataType: 'json',    
                        scrollHeight: 500,
                       //此處為傳遞參數(shù)
                        extraParams:{v:function() { return $('#keyword').val();}},
                      //需要把data轉(zhuǎn)換成json數(shù)據(jù)格式                      

                        parse: function(data) {
                           return $.map(eval(data), function(row) {
                               return {
                                data: row,
                                value: row.Guage,    //此處無需把全部列列出來，只是兩個關(guān)鍵列
                                result: row.Matcode 
                              }
                        });
                 },
                formatItem: function(data, i, total) {  
                   return "<table><tr><td align='left'>" + data.Guage + "</td><td align='right'> " + data.Unit + " </td></tr></table>"; 
                    
                 },
                formatMatch: function(data, i, total) {
                            return data.Guage;
                 },
                formatResult: function(data, value) { 
                            return data.Guage;   

                 }
                }).result(function(event, data, formatted) { //回調(diào)
                         $('#keyword').val(data.Matcode);   //不知為何自動返回值后總是加了個“,”,所以改成后賦值
                         $("#content").val(data.Guage+data.Unit);
            });
  });  
     </script>
 </head>
 <body>
     <form id="form1" runat="server">
     <div>
         <input id="keyword" />
         <input id="content" />
     </div>
     </form>
 </body>
 </html>

引用：

三、參數(shù)說明：

* minChars (Number):

在觸發(fā)autoComplete前用戶至少需要輸入的字符數(shù).Default: 1，如果設(shè)為0，在輸入框內(nèi)雙擊或者刪除輸入框內(nèi)內(nèi)容時顯示列表

* width (Number):

指定下拉框的寬度. Default: input元素的寬度

* max (Number):

autoComplete下拉顯示項目的個數(shù).Default: 10

* delay (Number):

擊鍵后激活autoComplete的延遲時間(單位毫秒).Default: 遠程為400 本地10

* autoFill (Boolean):

要不要在用戶選擇時自動將用戶當前鼠標所在的值填入到input框. Default: false

* mustMatch (Booolean):

如果設(shè)置為true,autoComplete只會允許匹配的結(jié)果出現(xiàn)在輸入框,所有當用戶輸入的是非法字符時將會得不到下拉框.Default: false

* matchContains (Boolean):

決定比較時是否要在字符串內(nèi)部查看匹配,如ba是否與foo bar中的ba匹配.使用緩存時比較重要.不要和autofill混用.Default: false

* selectFirst (Boolean):

如果設(shè)置成true,在用戶鍵入tab或return鍵時autoComplete下拉列表的第一個值將被自動選擇,盡管它沒被手工選中(用鍵盤或鼠標).當然如果用戶選中某個項目,那么就用用戶選中的值. Default: true

* cacheLength (Number):

緩存的長度.即對從數(shù)據(jù)庫中取到的結(jié)果集要緩存多少條記錄.設(shè)成1為不緩存.Default: 10

* matchSubset (Boolean):

autoComplete可不可以使用對服務器查詢的緩存,如果緩存對foo的查詢結(jié)果,那么如果用戶輸入foo就不需要再進行檢索了,直接使用緩存.通常是打開這個選項以減輕服務器的負擔以提高性能.只會在緩存長度大于1時有效.Default: true

* matchCase (Boolean):

比較是否開啟大小寫敏感開關(guān).使用緩存時比較重要.如果你理解上一個選項,這個也就不難理解,就好比foot要不要到FOO的緩存中去找.Default: false

* multiple (Boolean):

是否允許輸入多個值即多次使用autoComplete以輸入多個值. Default: false

* multipleSeparator (String):

如果是多選時,用來分開各個選擇的字符. Default: ","

* scroll (Boolean):

當結(jié)果集大于默認高度時是否使用卷軸顯示 Default: true

* scrollHeight (Number):

自動完成提示的卷軸高度用像素大小表示 Default: 180 

* formatItem (Function):

為每個要顯示的項目使用高級標簽.即對結(jié)果中的每一行都會調(diào)用這個函數(shù),返回值將用LI元素包含顯示在下拉列表中. Autocompleter會提供三個參數(shù)(row, i, max): 返回的結(jié)果數(shù)組, 當前處理的行數(shù)(即第幾個項目,是從1開始的自然數(shù)), 當前結(jié)果數(shù)組元素的個數(shù)即項目的個數(shù). Default: none, 表示不指定自定義的處理函數(shù),這樣下拉列表中的每一行只包含一個值.

* formatResult (Function):

和formatItem類似,但可以將將要輸入到input文本框內(nèi)的值進行格式化.同樣有三個參數(shù),和formatItem一樣.Default: none,表示要么是只有數(shù)據(jù),要么是使用formatItem提供的值.

* formatMatch (Function):

對每一行數(shù)據(jù)使用此函數(shù)格式化需要查詢的數(shù)據(jù)格式. 返回值是給內(nèi)部搜索算法使用的. 參數(shù)值row

* extraParams (Object):

為后臺(一般是服務端的腳本)提供更多的參數(shù).和通常的作法一樣是使用一個鍵值對對象.如果傳過去的值是{ bar:4 },將會被autocompleter解析成my_autocomplete_backend.aspx?q=foo&bar=4 (假設(shè)當前用戶輸入了foo). Default: {}

* result (handler) Returns: jQuery

此事件會在用戶選中某一項后觸發(fā)，參數(shù)為：

event: 事件對象. event.type為result.

formatted:formatResult函數(shù)返回的值

$("#singleBirdRemote").result(function(event, data, formatted) {

//如選擇后給其他控件賦值，觸發(fā)別的事件等等

});

四、注意問題：

1.網(wǎng)上有人說對中文的檢索時處理有問題，經(jīng)過測試此版本沒有問題 2.在使用遠程地址時，它默認傳入的參數(shù)是：q（輸入值），limit（返回結(jié)果的最大值），可以使用extraParams傳入其他的參數(shù)

exmple:
http://www.2cto.com/kf/201202/118735.html

posted @ 2012-05-19 00:14 youngturk 閱讀(599) | 評論 (0) | 編輯 收藏