IT教程 | 加入收藏 | 简体 | 繁体
Tangram教程:JavaScript...JQuery教程ExtJS教程Tangram教程Ajax教程
当前位置: 首页 > Js+Ajax > Tangram教程

baidu.ui.Suggestion 建立一个Suggestion实例

2012-07-23来源:[www.121ask.com]热度:0℃ 【字体:

baidu.ui.Suggestion

Suggestion基类,建立一个Suggestion实例

  语法: new baidu.ui.Suggestion(options)  

返回值:<instance> 实例对象

  扩展插件(增加对象参数和实例方法)

$coverable 支持背景遮罩 查看+
 
$data 提供数据内存缓存 查看+
 
$fixWidth 提供位置校准功能 查看+
 
$input 支持快捷键操作 查看+
 

参数

<Object> * options 选项.
<Function>    options.onshow 当显示时触发。
<Function>    options.onhide 当隐藏时触发,input或者整个window失去焦点,或者confirm以后会自动隐藏。
<Function>    options.onconfirm 当确认条目时触发,回车后,或者在条目上按鼠标会触发确认操作。参数是event对象,其中有data属性,包括item和index值。item为当前确认的条目,index是条目索引。。
<Function>    options.onbeforepick 使用方向键选中某一行,鼠标点击前触发。
<Function>    options.onpick 使用方向键选中某一行,鼠标点击时触发。参数是event对象,其中有data属性,包括item和index值。item为当前确认的条目,index是条目索引。
<Function>    options.onhighlight 当高亮时触发,使用方向键移过某一行,使用鼠标滑过某一行时会触发高亮。参数是event对象,其中有data属性,包括item和index值。item为当前确认的条目,index是条目索引。
<Function>    options.onload  
<Function>    options.onmouseoveritem  
<Function>    options.onmouseoutitem  
<Function>    options.onmousedownitem  
<Function>    options.onitemclick  
<Function> * options.view 重新定位时,会调用这个方法来获取新的位置,传入的参数中会包括top、 left、width三个值。
<Function> * options.getData 在需要获取数据的时候会调用此函数来获取数据,传入的参数word是用户在input中输入的数据。
<String> * options.prependHTML 写在下拉框列表前面的html
<String> * options.appendHTML 写在下拉框列表后面的html
<Boolean> * options.holdHighLight 鼠标移出待选项区域后,是否保持高亮元素的状态

实例方法

<Null> render(...) 将suggestion渲染到dom树中
<Null> pick(...) 把某个词放到input框中
<Null> show(...) 绘制suggestion
<Null> hide() 隐藏suggestion
<Null> highLight(...) 高亮某个条目
<Null> clearHighLight() 清除item高亮状态
<Null> confirm(...) confirm指定的条目
<String> getTargetValue() 获得target的值
<HTMLElement> getTarget() 获得input框元素
<Null> dispose() 销毁suggesiton

[NextPage]

 实例:

<body>
 
<div style="margin:50px">请输入国家名:<input type="text" id="suggestId" size="30" style="width:300px;" /></div>
 
</body>
 
<script type="text/javascript">
 
var instance = new baidu.ui.Suggestion({getData: function(word){var SD = ['AF Afgan 阿富汗 ','AL Albania 阿尔巴尼亚 ','AD Andorra 安道尔 ','AO Angola 安哥拉 ','AI Angola 安圭拉 ','AQ Antarctica 南极洲 ','AG Ntigua and Barbuda 安提瓜和巴布达 ','AR Argentina 阿根廷 ','AM Armenia 亚美尼亚 ','AW Aruba 阿鲁巴 ','AU Australia 澳大利亚 ','AT Austria 奥地利 ','AZ Azerbaijan 阿塞拜疆 ','AE United Arab Emirates 阿联酋 ','BS Bahamas 巴哈马 ','BH Bahrain 巴林 ','BD Bangladesh 孟加拉 ','BB Barbados 巴巴多斯 ','BY White Russia 白俄罗斯 ','BZ Belize 伯利兹 ','BE Belgium 比利时'],FD = []; baidu.array.each(SD, function(data, index){if(word && data.indexOf(word)!= -1){FD.push(data.replace(word, "<span style='color:red'>"+word+"</span>"));}}); this.appendHTML = "总共"+FD.length+"条";this.show(word,FD); }, onbeforepick: function(evt){ var div = document.createElement('div'); div.innerHTML = evt.data.item.content; evt.data.item.content = evt.data.item.value = baidu.dom.getText(div); } });
 
instance.render("suggestId");
 
/*
 
instance.hide();
 
*/
 
/*
 
(function(){
 
  alert(instance.getTargetValue());
 
})();
 
*/
 
/*
 
(function(){
 
  instance.show(str.value,eval(dat.value),eval(iss.value));
 
})();
 
*/
 
/*
 
(function(){
 
  instance.pick(parseInt(num.value));
 
})();
 
*/
 
/*
 
(function(){
 
  instance.pick(num2.value);
 
})();
 
*/
 
/*
 
(function(){  
 
  instance.confirm( parseInt(num3.value) );
 
})();
 
*/
 
/*
 
(function(){  
 
  instance.highLight( parseInt(num4.value) );
 
})();
 
*/
 
/*
 
(function(){  
 
  var op = this;
 
  setTimeout(function(){op.highLight( parseInt(num4.value) )},2000);
 
})();
 
*/
 
/*
 
(function(){  
 
  var op = this;
 
  setTimeout(function(){op.highLight( parseInt(num4.value) )},2000);
 
  setTimeout(function(){op.clearHighLight( parseInt(num4.value) )},5000);
 
})();
 
*/
 
//提示:您可以使用注释中的代码进行演示
 
</script>

 

以上IT文章《baidu.ui.Suggestion 建立一个Suggestion实例》由名客技术网[www.121ask.com]提供阅读!
名客技术网是一个免费为广大IT技术人员提供IT教程,绿色软件,asp/php/jsp/java/net等实例视频教程,CMS教程,破解软件下载以及学习相关源码、知识的IT网站。
名客技术网如果无意之中侵犯了您的版权,请来电告知,本站将在3个工作日内删除 QQ:175352796
Copyright 2011-2017 Powered by 121ASK.COM, All Rights Reserved.
备案号:鄂ICP备11013833号-3