Extjs ajax实现文本框(TextField)联想功能

最新推荐文章于 2016-09-23 15:28:03 发布

literaryfly

最新推荐文章于 2016-09-23 15:28:03 发布

阅读量444

点赞数

分类专栏： Extjs 文章标签： Ajax EXT Servlet HTML

本文链接：https://blog.csdn.net/literaryfly/article/details/83854779

版权

Extjs 专栏收录该内容

22 篇文章 0 订阅

订阅专栏


<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<base href="<%=basePath%>">

		<title>Extjs ajax实现文本框联系功能</title>

		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="This is my page">
		<link rel="stylesheet" type="text/css"
			href="./scripts/ext/resources/css/ext-all.css">
		<script type="text/javascript"
			src="./scripts/ext/adapter/ext/ext-base.js"></script>
		<script type="text/javascript" src="./scripts/ext/ext-all.js"></script>
	</head>
<style type="text/css" media="screen">
        body
        {
            font: 11pxarial;
        }
        .suggest_link
        {
            background-color: #FFFFFF;
            padding: 2px6px2px6px;
            border:1 solid black;
        }
        .suggest_link_over
        {
            background-color: #E8F2FE;
            padding: 2px6px2px6px;
        }
        #search_suggest
        {
            position: absolute;
            background-color: #FFFFFF;
            text-align: left;
            border: 1pxsolid#000000;
        }
    </style>
    <script type="text/javascript">
  Ext.BLANK_IMAGE_URL = 'js/extjs/resources/images/default/s.gif';   
        //显示层鼠标移入特效
        function suggestOver(div_value) {
            div_value.className = "suggest_link_over";
        }
        //显示层鼠标移出特效
        function suggestOut(div_value) {
            div_value.className = "suggest_link";
        }
        //显示层鼠标点击事件
        function setSearch(obj) {
            document.getElementById("txtSearch").value = obj;
            var div = document.getElementById("search_suggest");
            div.innerHTML = "";
            div.style.display = "none";
        }
        //鼠标离开文本框处理
        function tbblur() {
            var div = document.getElementById("search_suggest");
            //div.innerHTML = "";
            div.style.display = "none";
        }
Ext.onReady(function(){   
  //发送HTTP请求，当输入框的内容变化时，会调用该函数
function handleSearchSuggest(){   
    var str = escape(document.getElementById("txtSearch").value);
    Ext.Ajax.request({
     url: "servlet/UploadFile",
     method:'GET',
     params:{
      searchText:str
     },
    success:function(req){
                    var suggestText = document.getElementById("search_suggest");
                    var sourceText = req.responseText.split("\n");
                   // sourceText=['a','ab','bc']; 静态数据
                    if (sourceText.length > 1) {
                        suggestText.style.display = "";
                        suggestText.innerHTML = "";
                        for (var i = 0; i < sourceText.length - 1; i++) {
                            var s = '<div onmouseover="javascript:suggestOver(this);"';
                            s += ' onmouseout="javascript:suggestOut(this);" ';
                            s += ' onclick="javascript:setSearch(this.innerHTML);" ';
                            s += ' class="suggest_link">' + sourceText[i] + '</div>';
                            suggestText.innerHTML += s;
                        }

                    }
                    else {
                        suggestText.style.display = "none";
                    }
    }
    });
	};
	var suggestText=new Ext.form.TextField({   
     xtype: 'textfield',    
     id:'txtSearch',     
     allowBlank:false,     
     enableKeyEvents:true,
     listeners:{
     "keyup":function(obj){
     		handleSearchSuggest();
     },
     "focus":function(obj){
           handleSearchSuggest();
     },
     "blur":function(obj){
           tbblur();
     }
     }})
    suggestText.render("suggest_div");   
});  
    </script>
	<body>
	    <div id="suggest_div"></div>
        <div id="search_suggest" style="display: none ;width: 125px;"></div>
	</body>
</html>