• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >ASP.NET > asp.net下使用jQuery.AutoComplete完成仿淘宝商品搜索自动完成功能(改进了键盘上下选择体验)

asp.net下使用jQuery.AutoComplete完成仿淘宝商品搜索自动完成功能(改进了键盘上下选择体验)

作者: 字体:[增加 减小] 来源:互联网 时间:2017-05-11

通过本文主要向大家介绍了asp.net下使用jQuery.AutoComplete完成仿淘宝商品搜索自动完成功能(改进了键盘上下选择体验)等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

首先来看一些效果图:

pic1

这个是淘宝首页的搜索效果

pic3

京东首页的搜索效果

pic2


我修改的jQuery.AutoComplete实现的效果
一、实现效果分析
我要实现的效果就是和GOOGLE类似,需要满足一下3个要求(因为这样我认为是最好的用户体验,毕竟GOOGLE做了那么久了):
、首先根据关键字列出关键字相关的信息(包含统计信息)
、可以使用键盘上下键选择(默认不选中第一条),文本框内容根据选择信息变换
、当选择第一或者最后一条时再向上或向下则取消选中,文本框中内容还原回原先输入的内容(这点比较重要,京东这个就做不好,因为当在向上向下选择的过程中因为文本框内容会跟着换,所以就无法还原到当初用户所输入的内容了)

二、具体实现分析
首先呢因为具体数据时来自于数据库,所以首先在数据库中建立张表用于存放搜索历史记录,每次用户查询的其实就是数据库中的表的记录(也就是上次查询这个关键字的记录数)
附我
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

相关文章

  • 2017-05-11ASP.NET WebAPi(selfhost)实现文件同步或异步上传
  • 2018-08-20asp.net core MVC 过滤器之ActionFilter过滤器(2)
  • 2018-08-20ASP.NET MVC 使用Bootstrap的方法
  • 2017-05-11.NET WinFrom中给文本框添加拖放事件的代码
  • 2017-05-11ADO.NET中的五个主要对象的详细介绍与应用
  • 2017-05-11ASP.NET将Session保存到数据库中的方法
  • 2017-05-11ASP.NET MVC SSO单点登录设计与实现代码
  • 2017-05-11ASP.NET中 ObjectDataSource控件的DataObjectTypeName属性
  • 2018-08-20.NET实用扩展方法详解
  • 2017-05-11asp.net各种cookie代码和解析实例

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • 详解在Windows下如何使用AspNetCore Api 和consul
    • .net indexOf(String.indexOf 方法)
    • ASP.NET中用js取CheckBoxList中值的方法实例
    • .NET发布网站详细步骤
    • asp.net下使用DIME协议上传文件
    • 在ASP.NET 2.0中操作数据之四十八:对SqlDataSource控件使用开放式并发
    • dotnet封装的kindeditor编辑器控件
    • System.Timers.Timer定时执行程序示例代码
    • asp.net清空Cookie的两种方法
    • Global.cs中自动获取未处理的异常

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有