`
suqing
  • 浏览: 186761 次
  • 性别: Icon_minigender_2
  • 来自: 杭州
社区版块
存档分类
最新评论

autocomplete设计

 
阅读更多

autocomplete输入延迟、匹配、选择:

1、输入:如果用户每输入一个字符进行一次搜索,返回数据太大,而且不准,所以添加了输入延时;
添加0.5s的输入延时后发现,用户输入名字后很快会输入回车,也就是在0.5s延迟前就会按下回车。

 

所以对返回数据做了截取,只取前10个。

 

另一种实现是输入即搜索,没有延迟,缺点是会发起很多个请求,不过交互体验比较好。

2、匹配:输入“aa”,返回的是“aab、aa”,并且aab在第一位;搜索“cc”,因为做了返回结果限制10个以内,结果中没有“ccz”,搜索结果不太准确,这种情况下,用户必须输入完全才能得到结果,autocomplete效果不明显。

3、选择:默认返回的第一个用户是高亮的,可按↑↓←→选择,选择时即选中,会替换输入框的人名和对应隐藏域的用户id。

autocomplete的使用场景:
1、用户每输入一个字符显示一次反馈的效果最好,保证返回结果及时;
2、筛选项不是很多的时候:比如Gmail中填写收件人会过滤联系人的mail(用户通常只记得一部分,需要提示,比人名搜索有更大的提示作用)、飞机的出发地选择等等,保证返回结果准确。


在我们的用户搜索中,返回结果没有回车及时,输入不完全时也不是很准确,所以认为这里使用“自动完成”的效果并不能达到预期。

用户搜索的交互确定:
1、回车搜索人名,精确匹配;超过10个的返回,匹配度不高,还是需要进一步输入。


2、默认返回的第一个用户是高亮的,默认替换输入框的人名和对应隐藏的用户id,用户无需再次选择;可按↑↓←→选择,选择时即选中,会替换输入框的人名和对应隐藏域的用户id。
研究了业内选中的通用方法是“Tab键”选中,(Enter会和输入回车冲突)。

分享到:
评论

相关推荐

    jquery自动完成autocomplete,兼容各浏览器,支持中文

    jQuery Autocomplete设计上注重浏览器的兼容性,它可以在大多数现代浏览器中运行,包括Internet Explorer 8及以上版本、Firefox、Chrome、Safari和Opera等。由于其依赖于jQuery库,确保了跨浏览器的兼容性。不过,...

    jquery autocomplete下载.rar

    《jQuery Autocomplete 全面解析》 jQuery Autocomplete 是一个非常实用的插件,它为网页表单输入框提供了自动补全功能,极大地提升了用户体验。这个压缩包“jquery autocomplete下载.rar”包含了实现这一功能所需...

    layui自动填充插件autocomplete.rar

    layui是一款流行的前端JavaScript框架,以其简洁、优雅的API设计深受开发者喜爱。在layui中,"autocomplete"是一款自动填充插件,常用于输入框,提供智能提示功能,提高用户输入效率。这款插件适用于各种需要自动...

    BootStrap-autocomplete模糊匹配,自动填充

    Bootstrap Autocomplete是一款基于Bootstrap框架的插件,专为提高用户输入体验而设计。它提供了模糊匹配功能,使得用户在输入时能够快速找到并选择预先设定的值列表中的选项,极大地提升了交互性和效率。这个插件...

    jquery-ui-autocomplete

    - 响应式设计:确保Autocomplete在不同设备和屏幕尺寸上都能良好运行,可能需要调整布局和提示框的位置。 总之,jQuery UI Autocomplete 是一个强大且灵活的前端组件,广泛应用于各种Web应用程序中,提供高效的自动...

    仿百度、Google搜索效果 AutoComplete

    总之,仿百度、Google搜索效果的AutoComplete是前端开发中的一个重要组件,它结合了JavaScript、Ajax、数据库查询以及用户体验设计等多种技术,目的是提高用户在搜索场景下的操作效率和满意度。通过使用像`jquery-...

    jquery.autocomplete.js资源压缩包下载

    展示样式可以通过CSS进行定制,以适应不同的界面设计。 2. **数据处理**:`jquery.autocomplete.js`支持多种数据源,包括静态数组、AJAX请求、远程API等。数据源的配置灵活多样,可以根据实际需求选择合适的加载...

    jquery autocomplete js 文件

    jQuery Autocomplete 默认提供了一些基本样式,但你可能需要自定义以匹配网站设计。可以修改 CSS 类名或直接在项目中包含 Autocomplete 提供的 CSS 文件,例如 `jquery.autocomplete.css`。 ### 7. 高级配置 ...

    autoComplete 参考

    标题中的"autoComplete"指的是自动补全功能,这...综上所述,学习和掌握autoComplete的实现涉及多个方面的知识,包括但不限于数据结构、算法、UI设计、异步编程、性能优化等,对于提升用户体验和开发效率具有重要意义。

    jQuery-Autocomplete-master.rar

    jQuery Autocomplete是一个非常实用的前端插件,它允许开发者为输入框添加自动补全功能,极大地提升了用户体验。这个"jQuery-Autocomplete-master"压缩包提供了一个简单的示例,用于演示如何利用jQuery实现自动补全...

    jquery.autocomplete干净demo

    在本例中,"干净"可能意味着简洁的样式设计,避免过度复杂的装饰,使界面更加清晰。 **7. 性能优化** 为了提高性能,可以考虑缓存数据源、使用延迟加载(debounce)防止频繁请求,以及在用户停止输入一段时间后才...

    jquery.autocomplete的js+css

    `jQuery.autocomplete` 是一个基于 jQuery 的插件,用于实现自动补全功能,它极大地简化了在网页上创建高效、动态的输入字段的过程。这个插件通常被用于搜索框,帮助用户快速找到他们想要的选项,提高用户体验。在这...

    autocomplete插件

    在网页设计中,利用autocomplete功能可以极大地提升用户体验,减少用户手动输入的负担。 实现autocomplete功能的插件种类繁多,常见的有jQuery UI的Autocomplete、Twitter的Typeahead.js以及Bootstrap的...

    Jquery AutoComplete 使用demo

    默认的 jQuery UI 主题可能不符合所有设计要求。你可以通过 CSS 自定义 AutoComplete 的样式,或者使用其他的 jQuery UI 主题。 ### 6. 示例项目 在提供的 `JqueryAutoCompleteDemo` 压缩包中,通常包含了完整的 ...

    autocomplete.zip

    在Web开发中,提供用户友好的输入提示功能是提高用户体验的重要一环,而jQuery的Autocomplete插件正是为此目的设计的。本篇文章将深入探讨jQuery Autocomplete插件的使用方法、核心功能以及实际应用中的技巧。 一、...

    vue2autocomplete一个Vue2的文本输入自动完成组件

    Vue2Autocomplete是针对Vue 2框架设计的一个高效、可定制化的文本输入自动完成组件。这个组件主要用于提高用户在输入时的效率,通过提供实时的建议列表,帮助用户快速找到并选择所需的内容。Vue.js是一个轻量级但...

    前端项目-autocomplete.js.zip

    这个名为“autocomplete.js”的项目正是为了实现这一目标而设计的。它是一个快速、功能丰富的JavaScript库,专为前端开发者提供便捷的自动完成解决方案。 **一、autocomplete.js的核心特性** 1. **实时响应**:...

    带分页的jquery.autocomplete

    4. **定制样式和行为**:为了提供良好的用户体验,你可以自定义分页控件的样式,使其与网站设计保持一致。此外,还可以添加一些额外的交互,如预加载下一页,或者在用户输入时动态调整每页的条目数。 5. **优化性能...

    jquery.autocomplete.js

    通过自定义这个CSS文件,开发者可以轻松调整自动填充列表的样式,以符合网站的整体设计风格。 使用jQuery Autocomplete插件的基本步骤如下: 1. 引入jQuery库和Autocomplete插件的JS及CSS文件。 2. 选择需要应用...

    juery autocomplete.css && juery.autocomplete.js文件下载

    这些样式确保了与页面其他元素的协调性,同时也可以根据项目需求进行自定义,以满足特定的设计风格。通过修改这个文件,你可以调整下拉列表的宽度、高度、位置,以及高亮当前选中项的方式等。 2. **jquery....

Global site tag (gtag.js) - Google Analytics