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

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="" 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:程序效果

图:在搜索框中输入百度

查找的结果如下图所示:

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