Ext Js 4实现的一个搜索框，调用的是谷歌的api，使用谷歌来搜索

来源：互联网发布：qq群淘宝客没有订单编辑：程序博客网时间：2024/06/04 18:36

1：searchfiled.jsp的内容如下：

<%@ 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>toolbar4</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="ExtJS4/resources/css/ext-all.css" />    <script type="text/javascript" src="ExtJS4/bootstrap.js"></script>        <script type="text/javascript" src="ExtJS4/ext-all.js" ></script>    <script type="text/javascript" src="ExtJS4/locale/ext-lang-zh_CN.js"></script>         <script type="text/javascript" >     Ext.onReady(function() { // A simple subclass of BaseField that creates a HTML5 search field. Redirects to the// searchUrl when the Enter key is pressed.Ext.define('Ext.form.SearchField', {    extend: 'Ext.form.field.Base',    alias: 'widget.searchfield',    inputType: 'search',    // Config defining the search URL    searchUrl: 'http://www.google.com/search?q={0}',    // Add specialkey listener    initComponent: function() {        this.callParent();        this.on('specialkey', this.checkEnterKey, this);    },    // Handle enter key presses, execute the search if the field has a value    checkEnterKey: function(field, e) {        var value = this.getValue();        if (e.getKey() === e.ENTER && !Ext.isEmpty(value)) {            location.href = Ext.String.format(this.searchUrl, value);        }    }});Ext.create('Ext.form.Panel', {    title: 'BaseField Example',    bodyPadding: 5,    width: 250,    // Fields will be arranged vertically, stretched to full width    layout: 'anchor',    defaults: {        anchor: '100%'    },    items: [{        xtype: 'searchfield',        fieldLabel: 'Search',        name: 'query'    }],    renderTo: Ext.getBody()});});     </script>  </head>  <body>  </body></html>

2：程序效果

图：在搜索框中输入百度

查找的结果如下图所示：