aralejs / autocomplete Goto Github PK
View Code? Open in Web Editor NEW自动补全组件
自动补全组件
使用.set('disabled', true)之后,貌似没禁用完全,键盘事件还是在监听。
场景:
http://www.aliexpress.com/ 的搜索框
问题:
输入一个字母后离开输入框,再次focus输入框时候需要立即展现之前的联想框体
目前实现:
setup :function() {
var _self = this;
xxxxxx.superclass.setup.call(_self);
this.get('trigger').focus(function(){
if(this.value !== "" && _self.get('data').length !== 0){
_self.show();
}
});
}
之前修改了刷新频率的值,但是 ajax 请求发送的还是太频繁,如果设置过长,会有明显的延时。
两者很难折中,所以就提供属性配置。
输入不匹配的时候现在仍然显示
应该将模版清空并隐藏
<div class="{{prefix}}">
<ul class="{{prefix}}-ctn" data-role="items">
{{#each items}}
<li data-role="item" class="{{../prefix}}-item" data-value="{{value}}">{{highlightItem ../prefix}}</li>
{{/each}}
</ul>
{{items.length}}
</div>
items.length
返回为 0
<div class="{{prefix}}">
<ul class="{{prefix}}-ctn" data-role="items">
{{items.length}}
{{#each items}}
<li data-role="item" class="{{../prefix}}-item" data-value="{{value}}">{{highlightItem ../prefix}}</li>
{{/each}}
</ul>
</div>
items.length
返回正确
测过 handlebars,应该不是这个的问题。
可以看autocmplete的过滤器的例子中的输入过滤,如果把输入框中[email protected]中的a删除后在输入一个a后,光标会移动到最后的位置。
数据源:['abc', 'abd']
按回车选择 abc,再次点击下键还是 ['abc', 'abd'],应该只显示 abc。
textarea 回车的时候是换行而不是提交,submitOnEnter 属性对这种场景意义不大,想想如何对这种场景做特殊处理。
如题
每次按键都会触发查询流程,现在通过 delay 控制入口,但是如果已经进入数据查询后就不能阻止了。
dataSource 提供 abort 方法可能阻止数据查询,主要是 ajax 的异步查询。
现在 callback 返回两个值
.on('itemSelect', function(text, data) {
})
text 的值在 data 中也存在,text 没有存在的必要
如题,这个时候,文本框无法输入换行。
RT
当选中某一项时,输入框的焦点会移向浮层,这时会触发 blur 事件,blur 优先于 click,浮层隐藏了就无法选中
现在是 400ms 后再触发的处理方式,想想有没有更好的
dataSource 获取的数据
[
{title:'a', name:'b'},
{title:'c', name:'d'},
]
在选择某项后仍然希望获取 title 和 name,显示和选择的值不同。
由于部分业务可能会占用回车事件(比如注册keydown事件监测Enter)。需要通过TAB键也能选中项。
向右移动,浮层消失;向左移动,浮层不会消失。
itemEnter
itemLeave
简单数据的时候,filter默认为'startsWith',而在异步获取数据的情况下,应该默认为filter:''
用户输入的值可能不是 filter 想要的,有时候还要进行处理,增加 inputFilter 参数。
textarea 一般不是全文 complete,所以要根据光标的位置插入文本。
input 框中上下按键会到输入框的最左和最右,如果不阻止感觉体验不好。
textarea 框上下按键是选中不同的行,如果阻止就无法上下移动。
现在 input 默认阻止,textarea 要覆盖的话有很多代码重复。
如题
如果提供的相对路径 /
./
getData.json
,用 ajax get 请求
如果为 http://
https://
则用 jsonp
提供触发补全的最短/最长支付数
'./data.json?query={{query}}'
query 值需要被编码成 utf-8,而不是根据页面的编码。
支持可编辑的HTML容器
如果是 textarea,下拉层希望出现在光标下面,而不是输入框下面。
如果 ajax 的数据,按键频率太快会频繁的去请求
disabled = true 则不再进行补完的操作。
是否显示的判断是同步执行的,如果异步获取数据,那么在之前已经执行了。
当用户在js未运行前就键入内容就无法显示了,建议增加配置使控件初始化完即根据value展开。
这个是选bug还是enhancement呢?
看到新更新的autocomplete在ajax下把filter拿走了 这个原来作为兼容老接口方案是有用的
例如我们的数据返回需要经过重新组织才能使用。
默认选中第一个,按回车就可直接选择
回车时要选中某一项,要确定是否要提交表单
✔ Autocomplete -> AutoComplete
✔ 按照事件命名规范:驼峰
✔ resultsLocator 默认值为 data,用户约定
resultsLocator 改成任何类型都支持
✘ dataReturn 事件,数据返回的时候可以处理
filter 处理完后就渲染页面了,没必要再加中间步骤了
参考一下 kissy 的 suggest
✔ 输入框的回车后会提交表单 #2
✔ circular 去掉,默认循环
现在缺少文字提示,内容较少
如题
现在的逻辑是 data 返回空数组就不显示,但有的时候在没数据的时候要显示“无结果”等文案。
希望这种情况只要改模板就好了。
demo里面ui-autocomplete-item-hl样式缺失 看不到效果啦
input 变化会触发获取数据、过滤、渲染的流程,选中某项后 input 也发生变化了,但不应该在走这个流程
keydown 在 keyup 之前,所以回车后还是会触发 keyup,这导致回车选中某项时还会触发 keyup,如果内容有变化还会再次显示。
所以在操作键后不再触发 keyup。
之前把 blur 去掉了,还得考虑下更好的方法。
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.