监听表单中的内容变化

一、总结:

今天项目中要给表单控件添加搜索选择的效果,如下:

红框圈住的表单被点击之后,弹出如下框:

然后根据用户的搜索条件要显示查询结果供用户选择。

总结如何监听表单中的内容变化:

方法一:

1.

实现代码:

上面的代码实现出来的效果(类似百度搜索框)是,当用户在搜索框中输入查询条件,每当搜索框中的内容改变就会触发监听事件,并向服务器发送请求,搜索框下方相应的就显示查询到的结果。每次在将查询到的结果设置在界面之前都将前一次查询显示的数据从界面上remove掉,用这个方法来解决界面显示多条重复数据的问题。

此方法虽然可以根据用户当前输入的查询条件及时显示查询结果,但是向服务器请求太过频繁,项目中还是采用了第二种方法来代替。

(下面总结的是我的项目,和监听表单中的内容变化没有什么关系)

2.和第一种方法的区别是,第二种是让用户把查询条件填写完毕用户点击查询之后,客户端才去向服务器发送请求,从而再在界面中显示查询结果。

(用户只要点击查询结果中的某一栏,弹出框就消失,表单中显示相应的用户选择的用户信息。)

实现代码:

方法二:

当对表单做了修改之后返回退出才弹出提示框,如果没有作修改则不弹出提示框,如下:

明完善总结

时间: 2024-08-26 13:17:50

监听表单中的内容变化的相关文章

js监听输入框值的即时变化onpropertychange、oninput

js监听输入框值的即时变化onpropertychange.oninput 很多情况下我们都会即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感. 要达到的效果 很多情况下我们都会即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感.比如即时显示输入框已经被输入的字节数,或者即时读取输入的值来进行搜索引导,也就是google的关联搜索效果等. 只要我们能捕获即时事件就能做到很多事情. 需要了解的知识 首先,我们需要了解onchange和onpropert

监听INPUT值的即时变化

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

asp.net,监听输入框值的即时变化onpropertychange、oninput

作者:自由天堂发布站点:WEB六零零 网页设计制作原文地址:http://www.web600.net/html/editor/JavaScript/201001131529.html 要达到的效果 很多情况下我们都会即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感.比如即时显示输入框已经被输入的字节数,或者即时读取输入的值来进行搜索引导,也就是google的关联搜索效果等. 只要我们能捕获即时事件就能做到很多事情. 需要了解的知识 首先,我们需要了解onchange和o

iOS: 使用KVO监听控制器中数组的变化

一.介绍: KVO是一种能动态监听到属性值的改变的方式,使用场景非常广泛,这里我只讲如何监听控制器ViewController中数组的变化. 二.了解: 首先我们应该知道KVO是不能直接监听控制器ViewController数组的变化的,需要将数组定义在模型中,然后控制器ViewController持有模型对象,通过该对象才能监听. 三.步骤: <1>在控制器ViewController类中定义一个模型类Model,并在该类中声明一个可变的数组属性modelArray并进行懒加载,其实它最终就

实时监听组件中路由的变化

实时监听组件中路由的变化,通过watch来进行监听,当路由发生变化时,重新赋值,重新执行从后台获取数据的操作 watch: { '$route' (to, from) { this.listQuery.keywords=this.$route.query.keywords this.searchByKeywords() } }, methods: { searchByKeywords() { this.$store.dispatch('updateLoading', true) fetchSea

名称案例-使用keyup事件实现1 和 名称案例-使用watch监听文本框数据的变化2

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../vue.js"></script></head><body><div id="app"> <in

vue中父组件如何监听子组件值的变化

vue中我们会遇到很多父子组件通信的需求, 下面简单列一下,父子组件通信的几种情况 1:父组件向子组件传值:使用prop向子组件传值: 2:子组件实时监听父组件传来的值的变化:使用watch去监听父组件传来的值: 3:父组件可以通过this.$refs.name.去访问子组件的值或方法: 4:子组件可以通过this.$parent.去访问父组件的值或方法: 总结了一下,感觉好像挺全面的,好像不缺啥了.... 但是仔细一想,父组件如何去监听子组件的值呢?如何根据子组件中的某个值的变化,父组件作出响

Vue--watch控制监听路由地址-组件的变化----&#39;$route.path&#39;: function (newVal, oldVal)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

动态实时监听文本框中内容的变化

@property (strong, nonatomic) UITextField *iPhoneText; @property (strong, nonatomic) UITextField *passwordText; @property (strong, nonatomic) UIButton *passwordBtn; viewdidLoad 中设置文本框的监听变化的方法 [self.iPhoneText addTarget:self action:@selector(textChang