在js中 怎么样加入一个extjs搜索框框

4248人阅读
项目中常常用到搜索,特别是导航类的网站。自己做关键字搜索不太现实,直接调用百度的是最好的选择。使用jquery.ajax的jsonp方法可以异域调用到百度的js并拿到返回值,当然$.getScript也可以实现跨域调用js。
jsonp快速入门:
关于jquery.ajax的jsonp方法是用以及其error回调函数不能正确执行,请参考园长dudu的文章:
其他有关jsonp的文章:
ok,了解了jsonp的原理和应用后,我们看看百度的智能提示是如何做的在chrome的调试窗口下看看百度搜索发出的请求。当输入关键字“a”,请求如图:
用firebug看下请求的参数,如图:
请求方式:get请求请求参数:wd明显是要搜索的关键字;cb是请求回来的处理函数,名字可以随便给;t是时间戳,防止缓存的;p不知道什么意思,每次请求都给3就可以了;sid也不知道什么意思,不要也可以请求,如果想要也可以带上,值就是上面截图的值。
请求地址和参数都知道了,于是写下如下js测试是否可以拿到关键字提示(源码里的test.html页面):
var qsData = { 'wd': ‘a’, 'p': '3', 'cb': 'getData', 't': new Date().getMilliseconds().toString() };
async: false,
url: &/su&,
type: &GET&,
dataType: 'jsonp',
jsonp: 'jsoncallback',
data: qsData,
timeout: 5000,
success: function (json) {
error: function (xhr) {
qsData封装所有请求要发送的参数;getData是自定义的名称,用于处理返回的关键字(以下示例代码把请求回来的关键字打印到了FireBug的控制台):
function getData(data) {
var Info = data['s'];
//获取异步数据
console.log(Info);
监控下文本框,实时的发送ajax请求并拿回数据是这样的:
ok,测试可用,的确可以拿到关键字提示。但是总不能把一堆关键字放到前台让用户看,至少得跟百度一样,可以用鼠标和键盘方向键从候选词框里选词吧。最关键的来了,现在开始写完整的智能提示并配合鼠标和键盘对候选词的操作(源码里的index.html页面),实现如下功能:
即时监控字母键和数字键,按下就发ajax请求(也可以设置延迟发请求,源码里有);同时监控空格、退格、Delete、Enter等键;
鼠标移入弹出层高亮选中的行,点击可上屏;
按键盘上下方向键可以选择候选词,回车提交跳转到百度搜索页面;
点击页面其他部位自动隐藏弹出框;
按ESC键隐藏弹出框
监控鼠标和键盘输入的js(autoComplete.js 源码里有更详细的注释):
var timeoutId;
//延迟请求服务器
var highlightindex = -1;
//高亮标记
$(function () {
$(&#searchText&).keyup(function (event) {
var myEvent = event || window.event;
var keyCode = myEvent.keyC
//console.log(keyCode);
//监控键盘
if (keyCode &= 65 && keyCode &= 90 || keyCode &= 48 && keyCode &= 57 || keyCode &= 96 && keyCode &= 111 || keyCode &= 186 && keyCode &= 222 || keyCode == 8 || keyCode == 46 || keyCode == 32 || keyCode == 13) {
//延时操作
//clearTimeout(timeoutId);
//timeoutId = setTimeout(function () {
timeoutId = FillUrls();
FillUrls();
//异步请求
if (highlightindex != -1) {
highlightindex = -1;
else if (keyCode == 38 || keyCode == 40) {
if (keyCode == 38) {
var autoNodes = $(&#auto&).children(&div&)
if (highlightindex != -1) {
autoNodes.eq(highlightindex).css(&background-color&, &white&);
highlightindex--;
highlightindex = autoNodes.length - 1;
if (highlightindex == -1) {
highlightindex = autoNodes.length - 1;
autoNodes.eq(highlightindex).css(&background-color&, &#ebebeb&);
var comText = autoNodes.eq(highlightindex).text();
$(&#searchText&).val(comText);
if (keyCode == 40) {
var autoNodes = $(&#auto&).children(&div&)
if (highlightindex != -1) {
autoNodes.eq(highlightindex).css(&background-color&, &white&);
highlightindex++;
if (highlightindex == autoNodes.length) {
highlightindex = 0;
autoNodes.eq(highlightindex).css(&background-color&, &#ebebeb&);
var comText = autoNodes.eq(highlightindex).text();
$(&#searchText&).val(comText);
} else if (keyCode == 13) {
if (highlightindex != -1) {
var comText = $(&#auto&).hide().children(&div&).eq(highlightindex).text();
highlightindex = -1;
$(&#searchText&).val(comText);
$(&#auto&).hide();
$(&#searchText&).get(0).blur();
} else if (keyCode == 27) {
//按下Esc 隐藏弹出层
if ($(&#auto&).is(&:visible&)) {
$(&#auto&).hide();
最后实现效果展示。可以鼠标选择候选词也可以键盘方向键选择,点击即可上屏,回车直接跳到百度页面:
在线演示地址:
参考知识库
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
访问:6647304次
积分:74230
积分:74230
排名:第12名
原创:435篇
转载:4678篇
译文:22篇
评论:1588条
文章:21篇
阅读:41588
文章:15篇
阅读:31409
文章:22篇
阅读:193725
(4)(8)(28)(21)(47)(1)(1)(8)(170)(814)(1012)(1351)(969)(262)(207)(2)(3)(2)(61)(19)(2)(28)(22)(37)(1)(3)(4)(6)(9)(10)(26)怎么使用JS将URL添加到火狐的搜藏夹_怎么获取数据库中的一条记录显示到设定好的面板上_经过@Resource注解注入HibernateTemplate实例 得到的实例为空__脚本百事通
稍等,加载中……
^_^请注意,有可能下面的2篇文章才是您想要的内容:
怎么使用JS将URL添加到火狐的搜藏夹
怎么获取数据库中的一条记录显示到设定好的面板上
经过@Resource注解注入HibernateTemplate实例 得到的实例为空
怎么使用JS将URL添加到火狐的搜藏夹
如何使用JS将URL添加到火狐的搜藏夹?&script&
function addfavorite()
if (document.all)
window.external.addFavorite('','名字');
else if (window.sidebar)
window.sidebar.addPanel('名字', '', "");
&a href="#" onclick="addfavorite()"&加入收藏&/a&
使用上面的代码添加到火狐的搜藏夹后,页面只能在左侧边栏中打开,请问有什么方法使火狐搜藏的网址可以像普通页面一样在页面中间打开?
------解决方案--------------------再弹出的收藏窗口中不要勾选“在侧栏中载入次书签”就行了,但是js怎么设置默认不勾选木有找到~~------解决方案--------------------用firebug也许行吧,肯定挺费劲的。
怎么获取数据库中的一条记录显示到设定好的面板上
如何获取数据库中的一条记录显示到设定好的面板上现在需要获取一条查询记录,然后将获取到的查询记录显示在设计好的一个窗体上,设计大致效果如下:
请问如何获取显示?
另外如果是嵌套到一个数据表中,当点击数据表中的一行的时候显示该窗体该如何实现?
------解决方案--------------------比如,
String name = resultSet.getString(resultSet.findColumn("Name"));
textFieldName.setText(name);
------解决方案--------------------不想一个个写的话,就把javaBean实体类和表结构一一对应起来,用框架实现就好了。
另外,如果就这样几个基本信息你还不放一个表里,表设计是不是有问题啊。
经过@Resource注解注入HibernateTemplate实例 得到的实例为空
通过@Resource注解注入HibernateTemplate实例 得到的实例为空通过@Resource注解注入HibernateTemplate实例 得到的实例为空
//通过@Resource注解注入HibernateTemplate实例
HibernateTemplate hibernateT
public Object loadObject(String hql) {
final String hql1 =
List list = hibernateTemplate.executeFind(new HibernateCallback(){
public Object doInHibernate(Session session) throws
HibernateException{
System.out.println("in doInhibernate-------");
Query query = session.createQuery(hql1);
return query.list();
页面报空指针 java.lang.NullPointerException
com.eportal.DAO.BaseDAOImpl.loadObject(BaseDAOImpl.java:109)
据测试 变量hibernateTemplate 总是为null;执行到那个回调函数里就出错了 无法打印那条语句(后台没报错)
菜鸟初学 请大侠指导
------解决方案--------------------配置&bean id="hibernateTemplate" ……了吗?------解决方案--------------------应该是楼上说的问题,
另外可以继承 HibernateDaoSupport
试试 ,,super.getHibernateTemplate()
取模板对象。。
如果您想提高自己的技术水平,欢迎加入本站官方1号QQ群:&&,&&2号QQ群:,在群里结识技术精英和交流技术^_^
本站联系邮箱:关于ext js动态生成下拉框,如何利用js把数据库数据绑定到下拉框中的搜索推荐 -Web-TryCatch
>> 相关推荐
关于的搜索推荐
extjs动态生成下拉框,如何利用js把数据库数据绑定到下拉框中
http://topic.csdn.net/u//a1cf18ef-aaa6-4af8-bd5a-d.html?23162 看下这个...
index.aspx这个页面是怎么写的
页面的表单中根据情况有可能生成一下拉框,也有可能没有下拉框&select name="deliver" &... &/select&我想在表单提交前用JS对下拉框的选择做校验如...
数据窗口动态生成的下拉数据窗口,用dw_1.reset()后挂下拉数据窗口的字段如何清除下拉数据窗口,使之成为edit模式?
------------
关注(1)切换成DDDW:dw_1....
如标题所示,我有这么一个下拉框:&select name="addr" size="1" disabled &
&option selected value=7&--请选择地点--&/option&
点击按钮 出现一个下拉列表
下拉列表的值前面带复选框
且值是从数据库取出。请问如何实现
谢谢!最好能有代码~!
------------
这个要用到ajax,建议楼主用...
具体是这样的
有年,月两个下拉框年 月现在要按选择的年月在月的后面生成一个新的日下拉框,选择的月有多少号在这里面就有多少个号! 用JS应该怎么实现?请高手...
&!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&&html& &head&
&title&JS联动下拉框&/title&
&meta nam...
以下是HTML代码,形式就是这样,怎样在后台或得动态生成的表单值?&form name="form1" method="post" action="text.asp编程"&
&table width="6...
ext.js 提交后如何保持下拉框的内容不变?例如我有一个下拉框,楼层:1,2,3,默认是1层,当我选择2查询后,查询出的是2层的信息,但是下拉框又回到了1,请问怎...
我js 动态生成的几个下拉列表框,怎么判断它们的text是否相同?我要效果是如果 1 的下拉列表框和 2 的下拉列表框的text的值相等,或 1 和 3 的text 的值相等 ,则...
问题 就是利用javascript动态建立2个下拉列表 如何级联在一起
------------
var arr1 = new Array("a","b","c");var arr2 = new Array(new Array("a-1\...
这是参考(因为表生成出来了)有好的方法可采取&script type="text/javascript"&var oTable = document.createElement("table");oTable.border = 1;oT...
&select size="1" name="select2"&&%
set conn=server.createobject("adodb.connection")
dbpath=server.mappath("./db/cm.mdb")
conn.open...
js需要从这个变量中取出数据生成二级联动的select下拉列表,var menuList = {'场所': ['区域管理','片管理','上网场所信息','上网场所违规管理','消息...
请教各位,在html中,如果用js或jquery 生成从指定时间以来的:年、季度、月份的下拉列表如:从2009年1月至今的 年度、季度、月份下拉列表&select name="sel...
因为那一列是代码,我需要从字典表中读取出相应的名称
谢谢!!!
------------
------------
把tab order O0
------------
不是很明白 那...求助一个js搜索问题,如何判断多个输入框是否为空_百度知道
求助一个js搜索问题,如何判断多个输入框是否为空
不知道你要实现什么目的,你可以document.getElementById()拿到多个输入框,然后&&或这||运算就可以了
输入框太多,&&或者||太不好了吧?
可是输入框好像没有想checkbox那样的checked属性,也没有好的办法额
其他类似问题
为您推荐:
其他2条回答
可以给它们加classname,代码如下;}});$(&quot用jquery吧,如myClassvar isNull=true.each(function(){if($(this);):由于你的输入框较多;;break.length){isNull=此时若isNull为false则不全为空.myClass&quot.val()
何进暗使人鸩杀董后于何间驿庭,
您可能关注的推广
输入框的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁搜索框内有默认文字,在输入时消失,鼠标移出外面点击之后,如果搜索框内无文字,则变回默认文字,怎么做到的?
就是知乎的顶部那个框,看不懂啊
按投票排序
如果是HTML5,还可以用 &input placeholder="text" /&Demo:
有好多实现方法的,最简单的用HTML5的placeholder,&input type="text" placeholder="没有输入的时候我就出现啦!" /&。当然,HTML5的不能支持到IE。还有一种就是各位提到的用JS去做,就是在输入框focus和blur的时候去判断里面是否有内容,然后动态改变输入框的值。知乎的是采用的另外的一种,它在input上面浮了一层label,点击label时,label自己隐藏,输入框focus,当输入框blur的时候,浮层出现。
onfocus事件和 onblur事件。最基本的JS。
&input type="text" value="请输入关键词" onfocus="if(value=='请输入关键词')
{value=''}" onblur="if (value=='') {value='请输入关键词'}" name="keyword"
size="30" style="color:#e5e1e1;"/&是否是你想要的??
&input type="text" placeholder="请输入!" /& html5的属性,先进浏览器默认支持,其他不支持的就用onfocus/onblur控制
&input id="ls" class="searchInput" type="text" name="s" value="搜索话题、问题或人..." onfocus="this.value=(this.value==' 搜索话题、问题或人... ') ? '' : this." onblur="this.value=(this.value=='') ? ' 搜索话题、问题或人... ' : this."&---------------------------------(以下是后面那个“添加问题”按钮的)-------------------------------------&input class="searchBtn" type="submit" value="提示,提问前先搜索问题,查看是否已经有人问过了" title="添加问题"&------------------------------------------------------------------------------------------------------------------------------其实最简单就是在firefox浏览器下用firebug查看,一目了然。但好像后面“添加问题”按钮说明文字有一个定位。
个人感觉,input+label,label定位在input上比较好些,这样提示文字样式等可控很高,不过会产生额外dom开销,这些应该是值得的~~~
知乎搜索用的是input+label。label绝对定位于input上,当input获得焦点时,隐藏label,失去焦点时再显示。 隐藏或显示,可以通过直接改变label的style属性, 或者改变其祖先节点的className。后一种方式会好一些
已有帐号?
无法登录?
社交帐号登录}

我要回帖

更多关于 js搜索框代码 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信