一种基于Input标签实现输入和下拉并进行模糊搜索的方法

技术领域

本发明涉及web前端应用技术领域，尤其涉及一种基于Input标签实现输入和下拉并进行模糊搜索的方法。

背景技术

随着互联网技术的发展，各种web应用层出不穷，这些web应用在满足基本功能的同时，对交互方式也有了更高的追求。

特别是当数据量非常大的时候，有些基础的HTML标签就不能满足一些特定的场景，就需要基于HTML标签进行封装，从而在一些特定的场景中使用，例如当下拉选择框中数据量有成千上万条的时候，不能让用户一直向下滚动然后去查找目标数据，就需要在下拉框中插入分页组件来更好的展示数据，这样用户就可以通过翻页来找到目标数据。通过这样的封装，无论从功能还是交互以及UI上，都能让用户有更好的体验。

在一些常见的开源UI框架中，例如Element、Ant-Design等，这些UI框架都会有一些进行二次封装的UI组件，例如级联选择器、穿梭框、骨架屏、抽屉、步骤条等等组件，不仅满足了web前端开发中基本的功能需求，而且在交互上也给用户提供了更快捷、更高效的使用方式，从视觉上也更加简洁明了。

但在web前端开发过程中，一些开源的UI框架中的组件虽然能满足大部分的使用场景，但在某些特殊需求的地方，这些组件显得捉襟见肘，不能满足客户的需求。例如UI设计人员在设计模态框时，一些按钮的样式，并非是按照开源的UI框架中的模态框的样式来进行设计的，要么按钮位置不同，要么按钮颜色不同，或者是多了一些标签。如果要实现客户的需求，就不能直接使用这些组件进行开发，这时候就需要基于原生的HTML标签然后进行定制化组件开发来满足客户的需求。

发明内容

本发明提供了一种基于Input标签实现输入和下拉并进行模糊搜索的方法，以解决现有技术中原生的input标签能实现用户的输入，原生的select组件能实现用户的下拉选择，但没有一个原生的HTML标签既能实现输入的同时还能够进行下拉选择并且还能进行模糊搜索的功能。一些开源的UI框架中的组件也没有实现该功能的组件。因此要实现上述特殊需求的功能，要么基于原生的HTML标签进行实现，要么修改开源的UI框架的源码。而修改开源UI框架的源码有一定的难度，因此本发明主要是实现上述的第1种方案，也就是基于原生的HTML标签来进行实现，从而满足客户的需求。

本发明采用的技术方案是：提供一种基于Input标签实现输入和下拉并进行模糊搜索的方法，包括：

步骤1：创建InputSelect.vue文件；

步骤2：引入input和div标签，并增加script标签进行数据处理，增加style标签进行样式控制；

步骤3：定义isShowSelect控制是否显示下拉区域，定义selectedValue进行下拉数据初始化及其遍历；

步骤4：通过input的@focus和@input事件来触发下拉区域是否显示；

步骤5：使用filter和indexOf函数实现根据用户输入的字符进行下拉筛选。

进一步的，所述步骤1包括：

步骤1.1：在所在的工程的components文件夹中创建一个common文件夹；

步骤1.2：在common文件夹中创建一个InputSelect.vue文件。

进一步的，所述步骤2包括：

步骤2.1：在步骤1创建的InputSelect.vue文件中，创建一个template标签；

步骤2.2：在步骤2.1的template标签中，创建一个div标签；

步骤2.3：在步骤2.2的div标签中，创建一个input标签；

步骤2.4：在步骤2.3的input标签中，写入@focus属性，并写上showSelect事件；

步骤2.5：在步骤2.4的input标签中，写入@input属性，并写上inputChange事件；

步骤2.6：增加脚本标签，插入js代码。

进一步的，所述步骤3包括：

步骤3.1：在步骤2.6的标签中，定义一个isShowSelect变量，并初始化其值为false,该变量主要用于控制input下方的选择区域是否显示，默认不显示；

步骤3.2：在showSelect事件中，将步骤3.1的isShowSelect变量，通过isShowSelect.value＝true，将其值改为true,从而让选择区域进行显示；

步骤3.3：在步骤2.3创建的div中，添加v-if＝"isShowSelect"，来控制div是否显示，并在该div中再添加一个div，用户显示具体的条目；

步骤3.4：在步骤2.6的标签中，定义一个selectData变量，并初始化其值为[],该变量主要用于接收传进来的选择区域的数据来源；

步骤3.5：在步骤3.3创建的div中，添加v-for＝"iteminselectData"，对步骤3.4的传进来的数据进行遍历，并将每条遍历的数据，放入步骤3.3的div中，从而对下拉数据进行展示；

步骤3.6：在步骤2.6的标签中，定义一个selectedValue变量，并初始化其值为空。

进一步的，所述步骤4包括：

步骤4.1：给步骤3.3的div中，添加一个@click事件，当用户点击时，传入被点击的条目，将被点击的条目的值，传入步骤3.6定义的selectedValue变量中，并将其双向绑定给input，从而实现被点击后，动态改变input的值的效果；

步骤4.2：当用户在input中输入值时，触发@input事件，在步骤2.3的inputChange事件中，传入用户输入的值；

步骤4.3：初始化一个数组，名为userInfoArray，其初始值为空；

步骤4.4：用户点击确定后，将之前输入的值，通过push函数将值放入步骤4.3定义的userInfoArray中，并使用JSON.stringify将其转换为一个JSON字符串，并存入到localStorage中；

步骤4.5：当用户下次点击步骤2.3中的input时，通过localStorage.getItem()来获取之前存入过的值，并通过JSON.parse()来将其值转换为一个JSON对象；

步骤4.6：在步骤2.6的标签中，定义一个newSelectData变量，并初始化其值为空；

步骤4.7：当用户下次点击步骤2.3中的input时，将步骤4.6获取到的数组赋值给步骤4.6的newSelectData。

进一步的，所述步骤5包括：

步骤5.1：对步骤3.6的selectedValue使用filter方法，并传入item.indexOf(val)>＝0的条件，并将filter方法返回的数组赋值给步骤4.3中定义的newSelectData，从而筛选出用户可能会进行的输入；

步骤5.2：将步骤3.3中的v-for＝"iteminselectData"改为v-for＝"iteminnewSelectData"，从而实现模糊搜索并进行筛选的功能；

步骤5.3：对步骤2.2的div，通过css控制其样式，主要是宽度保持和步骤2.3的input标签一样的宽度，并设置其宽高，以及边框的样式，并对其进行绝对定位，从而保证与input的位置是能紧密贴合的；

步骤5.4：将步骤2.6中，插入js代码，通过exportdefaultdefineComponent()方法抛出，从而实现通用组件的封装，供其他页面进行调用；

步骤5.5：在其他页面，通过import的方式，将该通用组件引入进来，并通过props传递数据，从而实现该通用组件的使用。

本发明的有益效果是：

(1)、本发明主要是基于HTML的input标签来实现用户既可以输入内容，也可以通过选择下方的下拉区域来选择之前输入过的条目，避免输入和之前重复的内容。

(2)、本发明在用户每次输入一个字符的时候，会对下方的内容区域进行模糊搜索，筛选出用户可能输入的内容，过滤掉无关条目。当数据非常多时，比如有上百条、上千条数据时，通过模糊搜索，可以快速查找到用户曾经输入过的内容，从而提高查找效率，避免用户忘记曾经输入过的内容。

(3)、通过该组件的实现，不仅满足了客户的需求，也提高了用户的使用效率，从UI上来看也更加简洁明了，比将input和select标签分开使用更加简洁，且使用起来更高效。

附图说明

图1为本发明公开的基于Input标签实现输入和下拉并进行模糊搜索的方法流程图。

具体实施方式

为了使本发明的目的、技术方案和优点更加清楚，下面将结合附图对本发明作进一步详细描述，但本发明的实施方式不限于此。

实施例1：

本发明的实施例公开一种基于Input标签实现输入和下拉并进行模糊搜索的方法，通过基于HTML的input标签来在下方增加一个div标签，通过vue框架的v-if指令来控制这个div在哪种情况下需要进行显示或者隐藏。通过v-for指令来对下拉数组进行遍历，将遍历的条目填充到该div中，从而实现下拉效果。

当用户输入时，通过input的input事件，获取用户输入的值，然后对用户之前输入的条目的数据进行遍历，将用户输入的当前值与数组中的条目进行匹配，如果匹配，则返回该条目，否则，过滤掉该条目。

具体的，参见图1，本发明主要涉及到HTML原生的input标签、div标签，以及input的focus事件和input事件，div的click事件，还涉及到使用到了浏览器本地存储localStorage来对用户输入的值进行本地化存储，具体实施方式见如下描述：

步骤1：创建InputSelect.vue文件。

具体的，步骤1包括：

步骤1.1：在所在的工程的components(组件)文件夹中创建一个common(通用)文件夹；

步骤1.2：在common文件夹中创建一个InputSelect.vue文件。

步骤2：引入input和div标签，并增加script标签进行数据处理，增加style标签进行样式控制。

具体的，步骤2包括：

步骤2.1：在步骤1创建的InputSelect.vue文件中，创建一个template(模板)标签；

步骤2.2：在步骤2.1的template标签中，创建一个div标签；

步骤2.3：在步骤2.2的div标签中，创建一个input标签；

步骤2.4：在步骤2.3的input标签中，写入@focus属性，并写上showSelect事件；

步骤2.5：在步骤2.4的input标签中，写入@input属性，并写上inputChange事件；

步骤2.6：增加脚本标签，插入js代码(即增加)。

步骤3：定义isShowSelect(是否显示下拉)控制是否显示下拉区域，定义selectedValue(选中的值)进行下拉数据初始化及其遍历。

具体的，步骤3包括：

步骤3.1：在步骤2.6的标签中，定义一个isShowSelect变量，并初始化其值为false,该变主要用于控制input下方的选择区域是否显示，默认不显示；

步骤3.2：在showSelect事件中，将步骤3.1的isShowSelect变量，通过isShowSelect.value＝true，将其值改为true,从而让选择区域进行显示；

步骤3.3：在步骤2.3创建的div中，添加v-if＝"isShowSelect"，来控制div是否显示，并在该div中再添加一个div，用户显示具体的条目；

步骤3.4：在步骤2.6的标签中，定义一个selectData变量，并初始化其值为[],该变量主要用于接收传进来的选择区域的数据来源；

步骤3.5：在步骤3.3创建的div中，添加v-for＝"iteminselectData"，对步骤3.4的传进来的数据进行遍历，并将每条遍历的数据，放入步骤3.3的div中，从而对下拉数据进行展示；

步骤3.6：在步骤2.6的标签中，定义一个selectedValue变量，并初始化其值为""。即初始化其值为空。

步骤4：通过input的@focus和@input事件来触发下拉区域是否显示。

具体的，步骤4包括：

步骤4.1：给步骤3.3的div中，添加一个@click事件，当用户点击时，传入被点击的条目，将被点击的条目的值，传入步骤3.6定义的selectedValue变量中，并将其双向绑定给input，从而实现被点击后，动态改变input的值的效果；

步骤4.2：当用户在input中输入值时，会触发@input事件，在步骤2.3的inputChange事件中，传入用户输入的值；

步骤4.3：初始化一个数组，名为userInfoArray(用户信息数组)，其初始值为[]；即初始值为空；

步骤4.4：用户点击确定后，将之前输入的值，通过push函数将值放入步骤4.3定义的userInfoArray中，并使用JSON.stringify将其转换为一个JSON字符串，并存入到localStorage中；

步骤4.5：当用户下次点击步骤2.3中的input时，通过localStorage.getItem()来获取之前存入过的值，并通过JSON.parse()来将其值转换为一个JSON对象；

步骤4.6：在步骤2.6的标签中，定义一个newSelectData变量，并初始化其值为[]；

步骤4.7：当用户下次点击步骤2.3中的input时，将步骤4.6获取到的数组赋值给步骤4.6的newSelectData。

步骤5：使用filter和indexOf函数实现根据用户输入的字符进行下拉筛选。

具体的，步骤5包括：

步骤5.1：对步骤3.6的selectedValue使用filter方法，并传入item.indexOf(val)>＝0的条件，并将filter方法返回的数组赋值给步骤4.3中定义的newSelectData，从而筛选出用户可能会进行的输入；其中val为形参；

步骤5.2：将步骤3.3中的v-for＝"iteminselectData"改为v-for＝"iteminnewSelectData"，从而实现模糊搜索并进行筛选的功能；

步骤5.3：对步骤2.2的div，通过css控制其样式，主要是宽度保持和步骤2.3的input标签一样的宽度，并设置其宽高，以及边框的样式，并对其进行绝对定位，从而保证与input的位置是能紧密贴合的；

步骤5.4：将步骤2.6中，插入js代码，通过exportdefaultdefineComponent()方法抛出，从而实现通用组件(即input和下拉组成的组件)的封装，供其他页面进行调用；

步骤5.5：在其他页面，通过import的方式，将该通用组件引入进来，并通过props传递数据，从而实现该通用组件的使用。

通过以上技术方案的实施，实现了用户不仅可以通过键盘输入新的值，也可以通过下拉对之前填写过的内容进行选择，避免重复填写相同的内容，并且在用户输入每一个字符时，会对之前输入的值进行模糊搜索，并进行模糊匹配，过滤掉无关条目，筛选出用户可能会输入的条目。从而提高用户使用效率，提供更良好的使用体验。

以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。