CN112163144A

CN112163144A - 一种web前端搜索优化方法

Info

Publication number: CN112163144A
Application number: CN202011053690.9A
Authority: CN
Inventors: 张涵文; 宋舰; 邓文科; 黄睿葱; 钟华; 彭一亮
Original assignee: Sichuan Hongmagic Cube Network Technology Co ltd
Current assignee: Sichuan Hongmagic Cube Network Technology Co ltd
Priority date: 2020-09-29
Filing date: 2020-09-29
Publication date: 2021-01-01

Abstract

本发明公开了一种web前端搜索优化方法，包括web应用检测到搜索输入框或者搜索选择框的值发生改变时，启动定时，定时结束时，web应用判定为用户输入完成，Web应用在定时结束时就向服务器以post的方式发送一个异步请求，该请求带有封装为json格式的用户需要查询的关键词。后端服务器接收到请求后就执行模糊查询，然后将搜索结果通过接口返回给web前端。本发明在保证关键词的精确性的同时还确保了搜索的灵活性、高效性，能够提升用户的使用体验。

Description

一种web前端搜索优化方法

技术领域

本发明涉及互联网信息技术领域，具体的说，是一种web前端搜索优化方法。

背景技术

在互联网web前端的应用中，通常会涉及到内容的搜索或查询。传统的解决方法是输入或选择完备的关键词后通过点击查询按钮执行搜索方法查询内容。通过这种方法可以实现对搜索关键词的精准控制，搜索结果就是满足用户期望的搜索结果。但是这种搜索方式用户在web页面输入关键词后都需要按回车健或手动点击查询按钮，才会执行web应用的查询函数与后端进行数据请求。这样的搜索方式不够灵活，使用起来并不便利，在互联网应用中缺乏高效性，影响了用户的使用体验。

发明内容

本发明的目的在于提供一种web前端搜索优化方法，用于解决现有技术中用户在web页面输入关键词后都需要按回车健或手动点击查询按钮，才会执行web应用的查询函数与后端进行数据请求存在不够灵活，缺乏高效性，影响用户体验的问题。

本发明通过下述技术方案解决上述问题：

一种web前端搜索优化方法，包括web应用自动检测用户输入，并在用户输入完成后自动向后端服务器请求数据，后端服务器返回搜索结果。

web应用自动检测用户是正在输入还是输入完成，当检测到用户输入完成时，向后端请求数据，后端服务器根据搜索算法查询用户想要的数据并返回web应用呈现给用户；如果检测到用户输入未完成，则等待用户输入完成再向后端服务器发送请求。用户不需要在完成搜索关键字输入后再点击查询按钮或者按回车确认启动查询，操作更灵活、便利，提升用户体验。

可选地，所述web应用自动检测用户输入包括：

步骤A：web应用检测到搜索输入框或者搜索选择框的值发生改变时，启动定时；

步骤B：定时结束时，web应用判定为用户输入完成。

Web应用在定时结束时就向服务器以post的方式发送一个异步请求，该请求带有封装为json格式的用户需要查询的关键词。后端服务器接收到请求后就执行模糊查询，然后将搜索结果通过接口返回给web前端。

可选地，所述步骤A具体为：

步骤A1：web应用的html页面设置搜索输入框和搜索选择框，搜索输入框由html页面中的input标签创建，搜索选择框由html页面中的select标签创建；

步骤A2：使用form标签创建form表单并将input标签和select标签放入form标签中，搜索输入框或搜索选择框的值以变量的形式包含在form表单对象中，web前端调用form表单对象并操作里面的变量读取用户输入的关键词；

步骤A3：将input标签和select标签的onchange事件与搜索函数search()函数绑定，实现搜索输入框或搜索选择框的值发生变化触发onchange事件时都会执行search()函数同时设置定时器；所述定时器初始化为null，当用户输入后定时器为函数对象，所述search()函数定义为：

判断定时器是否为函数对象，如果不是，将setTimeout()方法赋值给定时器，定时器由null变为定时器函数setTimeout(function,ms)并开始计时，实现在设定时间达到时相后端服务器发送请求和调用clearTimeout()方法，所述clearTimeout()方法用于初始化定时器并结束search()函数；如果是，调用clearTimeout()方法，初始化定时器。

可选地，还包括在定时结束之前，若检测到搜索输入框输入新的字符或者搜索选择框的值发生改变，则重新定时。

本发明与现有技术相比，具有以下优点及有益效果：

本发明在保证关键词的精确性的同时还确保了搜索的灵活性、高效性，能够提升用户的使用体验。

附图说明

图1为本发明的流程图；

图2为搜索函数逻辑示意图。

具体实施方式

下面结合实施例对本发明作进一步地详细说明，但本发明的实施方式不限于此。

实施例：

结合附图1所示，一种web前端搜索优化方法，包括：

一、检测用户输入的关键字或关键词

在web前端的html页面中放置好搜索输入框或搜索选择框，搜索输入框由html中的input标签创建，搜索选择框由html中的select标签创建。当有需要有多个查询关键词时可以将这些搜索输入框或搜索选择框放在表单里面，使用form标签创建form表单并将创建搜索输入框的input标签或创建搜索选择框的select标签放入form标签中。使用form表单后，搜索输入框或搜索选择框的值会以变量的形式包含在form表单对象中，web前端只需要调用form表单对象并操作里面的变量就可以方便地读取到用户输入的关键词。

二、检测到搜索输入框或搜索选择框的值改变时启动定时器

web前端的html页面中地input标签和select标签都具有一个事件属性，那就是onchange事件，在元素值被改变时就会触发。在input标签和select标签中使用语句onchange＝"search()"可以将search()函数绑定为onchange事件的一个回调，这样每次搜索输入框或搜索选择框的值发生变化而触发onchange事件时都会执行search()函数，当它执行完毕后会重置全局定时器。

定时器和搜索函数的定义如下：

定义一个全局定时器timer，并将它初始化为null，定时器的作用是辅助web前端判断用户是否输入完想要搜索的关键词。

定义web前端的搜索函数search()，搜索函数逻辑步骤如图2所示。搜索函数的执行步骤如下：

A.判断全局定时器timer是否为函数对象。当用户还没有输入时timer的值为null，当用户开始输入后timer的值为函数对象。

B.如果全局定时器timer不是函数对象，采用timer＝setTimeout(function,ms)将setTimeout()方法赋值给timer，此时全局定时器由null变为一个定时器函数并开始计时。setTimeout(function,ms)方法用于在指定的毫秒数后调用function函数，function函数的函数体中包含向服务器发送异步请求的方法及clearTimeout()方法。参数ms是指定的毫秒数在600ms至1000ms之间，这个时间大于用户的输入间隔同时又不会让用户感觉到明显的停顿。由于请求数据的方法是异步的所以在指定时长之后会执行clearTimeout()方法同时异步请求接口，这时候search()函数的生命周期结束。

C.如果全局定时器timer是函数对象，调用clearTimeout()方法初始化定时器timer。clearTimeout()方法可取消由setTimeout()方法设置的定时操作以及时释放定时器所占用的资源，然后再将setTimeout()方法重新赋值给timer，此时定时器的时间会重置。

三、定时器计时到达，web应用向后端服务器发送请求，同时重置定时器；

四、后端服务器根据请求执行搜索算法，返回结果；

五.web前端渲染搜索结果，呈现给用户。

尽管这里参照本发明的解释性实施例对本发明进行了描述，上述实施例仅为本发明较佳的实施方式，本发明的实施方式并不受上述实施例的限制，应该理解，本领域技术人员可以设计出很多其他的修改和实施方式，这些修改和实施方式将落在本申请公开的原则范围和精神之内。

Claims

1.一种web前端搜索优化方法，其特征在于，包括web应用自动检测用户输入，并在用户输入完成后自动向后端服务器请求数据，后端服务器返回搜索结果。

2.根据权利要求1所述的一种web前端搜索优化方法，其特征在于，所述web应用自动检测用户输入包括：

步骤B：定时结束时，web应用判定为用户输入完成。

3.根据权利要求2所述的一种web前端搜索优化方法，其特征在于，所述步骤A具体为：

4.根据权利要求2或3所述的一种web前端搜索优化方法，其特征在于，还包括在定时结束之前，若检测到搜索输入框输入新的字符或者搜索选择框的值发生改变，则重新定时。