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

本发明专利技术公开了一种基于Input标签实现输入和下拉并进行模糊搜索的方法，包括：步骤1：创建InputSelect.vue文件；步骤2：引入input和div标签，并增加script标签进行数据处理，增加style标签进行样式控制；步骤3：定义isShowSelect控制是否显示下拉区域，定义selectedValue进行下拉数据初始化及其遍历；步骤4：通过input的@focus和@input事件来触发下拉区域是否显示；步骤5：使用filter和indexOf函数实现根据用户输入的字符进行下拉筛选。本发明专利技术实现了用户不仅可以通过键盘输入新的值，也可以通过下拉对之前填写过的内容进行选择，避免重复填写相同的内容，并且在用户输入每一个字符时，会对之前输入的值进行模糊搜索，并进行模糊匹配，过滤掉无关条目，筛选出用户可能会输入的条目。从而提高用户使用效率，体验更佳。体验更佳。体验更佳。

【技术实现步骤摘要】
一种基于Input标签实现输入和下拉并进行模糊搜索的方法


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

技术介绍

[0002]随着互联网技术的发展，各种web应用层出不穷，这些web应用在满足基本功能的同时，对交互方式也有了更高的追求。
[0003]特别是当数据量非常大的时候，有些基础的HTML标签就不能满足一些特定的场景，就需要基于HTML标签进行封装，从而在一些特定的场景中使用，例如当下拉选择框中数据量有成千上万条的时候，不能让用户一直向下滚动然后去查找目标数据，就需要在下拉框中插入分页组件来更好的展示数据，这样用户就可以通过翻页来找到目标数据。通过这样的封装，无论从功能还是交互以及UI上，都能让用户有更好的体验。
[0004]在一些常见的开源UI框架中，例如Element、Ant
‑
Design等，这些UI框架都会有一些进行二次封装的UI组件，例如级联选择器、穿梭框、骨架屏、抽屉、步骤条等等组件，不仅满足了web前端开发中基本的功能需求，而且在交互上也给用户提供了更快捷、更高效的使用方式，从视觉上也更加简洁明了。
[0005]但在web前端开发过程中，一些开源的UI框架中的组件虽然能满足大部分的使用场景，但在某些特殊需求的地方，这些组件显得捉襟见肘，不能满足客户的需求。例如UI设计人员在设计模态框时，一些按钮的样式，并非是按照开源的UI框架中的模态框的样式来进行设计的，要么按钮位置不同，要么按钮颜色不同，或者是多了一些标签。如果要实现客户的需求，就不能直接使用这些组件进行开发，这时候就需要基于原生的HTML标签然后进行定制化组件开发来满足客户的需求。

技术实现思路

[0006]本专利技术提供了一种基于Input标签实现输入和下拉并进行模糊搜索的方法，以解决现有技术中原生的input标签能实现用户的输入，原生的select组件能实现用户的下拉选择，但没有一个原生的HTML标签既能实现输入的同时还能够进行下拉选择并且还能进行模糊搜索的功能。一些开源的UI框架中的组件也没有实现该功能的组件。因此要实现上述特殊需求的功能，要么基于原生的HTML标签进行实现，要么修改开源的UI框架的源码。而修改开源UI框架的源码有一定的难度，因此本专利技术主要是实现上述的第1种方案，也就是基于原生的HTML标签来进行实现，从而满足客户的需求。
[0007]本专利技术采用的技术方案是：提供一种基于Input标签实现输入和下拉并进行模糊搜索的方法，包括：
[0008]步骤1：创建InputSelect.vue文件；
[0009]步骤2：引入input和div标签，并增加script标签进行数据处理，增加style标签进行样式控制；
[0010]步骤3：定义isShowSelect控制是否显示下拉区域，定义selectedValue进行下拉数据初始化及其遍历；
[0011]步骤4：通过input的@focus和@input事件来触发下拉区域是否显示；
[0012]步骤5：使用filter和indexOf函数实现根据用户输入的字符进行下拉筛选。
[0013]进一步的，所述步骤1包括：
[0014]步骤1.1：在所在的工程的components文件夹中创建一个common文件夹；
[0015]步骤1.2：在common文件夹中创建一个InputSelect.vue文件。
[0016]进一步的，所述步骤2包括：
[0017]步骤2.1：在步骤1创建的InputSelect.vue文件中，创建一个template标签；
[0018]步骤2.2：在步骤2.1的template标签中，创建一个div标签；
[0019]步骤2.3：在步骤2.2的div标签中，创建一个input标签；
[0020]步骤2.4：在步骤2.3的input标签中，写入@focus属性，并写上showSelect事件；
[0021]步骤2.5：在步骤2.4的input标签中，写入@input属性，并写上inputChange事件；
[0022]步骤2.6：增加脚本标签，插入js代码。
[0023]进一步的，所述步骤3包括：
[0024]步骤3.1：在步骤2.6的标签中，定义一个isShowSelect变量，并初始化其值为false,该变量主要用于控制input下方的选择区域是否显示，默认不显示；
[0025]步骤3.2：在showSelect事件中，将步骤3.1的isShowSelect变量，通过isShowSelect.value＝true，将其值改为true,从而让选择区域进行显示；
[0026]步骤3.3：在步骤2.3创建的div中，添加v
‑
if＝"isShowSelect"，来控制div是否显示，并在该div中再添加一个div，用户显示具体的条目；
[0027]步骤3.4：在步骤2.6的标签中，定义一个selectData变量，并初始化其值为[],该变量主要用于接收传进来的选择区域的数据来源；
[0028]步骤3.5：在步骤3.3创建的div中，添加v
‑
for＝"iteminselectData"，对步骤3.4的传进来的数据进行遍历，并将每条遍历的数据，放入步骤3.3的div中，从而对下拉数据进行展示；
[0029]步骤3.6：在步骤2.6的标签中，定义一个selectedValue变量，并初始化其值为空。
[0030]进一步的，所述步骤4包括：
[0031]步骤4.1：给步骤3.3的div中，添加一个@click事件，当用户点击时，传入被点击的条目，将被点击的条目的值，传入步骤3.6定义的selectedValue变量中，并将其双向绑定给input，从而实现被点击后，动态改变input的值的效果；
[0032]步骤4.2：当用户在input中输入值时，触发@input事件，在步骤2.3的inputChange事件中，传入用户输入的值；
[0033]步骤4.3：初始化一个数组，名为userInfoArray，其初始值为空；
[0034]步骤4.4：用户点击确定后，将之前输入的值，通过push函数将值放入步骤4.3定义的userInfoArray中，并使用JSON.stringify将其转换为一个JSON字符串，并存入到localStorage中；
[0035]步骤4.5：当用户下次点击步骤2.3中的input时，通过localStorage.getItem()来获取之前存入过的值，并通过JSON.parse()来将其值转换为一个JSON对象；
[0036]步骤4.6：在步骤2.6的标签中，定义一个newSelectData变量，并初始化其值为空；
[0037]步骤4.7：当用户下次点击步骤2.3中的input时本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种基于Input标签实现输入和下拉并进行模糊搜索的方法，其特征在于，包括：步骤1：创建InputSelect.vue文件；步骤2：引入input和div标签，并增加script标签进行数据处理，增加style标签进行样式控制；步骤3：定义isShowSelect控制是否显示下拉区域，定义selectedValue进行下拉数据初始化及其遍历；步骤4：通过input的@focus和@input事件来触发下拉区域是否显示；步骤5：使用filter和indexOf函数实现根据用户输入的字符进行下拉筛选。2.根据权利要求1所述的基于Input标签实现输入和下拉并进行模糊搜索的方法，其特征在于，所述步骤1包括：步骤1.1：在所在的工程的components文件夹中创建一个common文件夹；步骤1.2：在common文件夹中创建一个InputSelect.vue文件。3.根据权利要求2所述的基于Input标签实现输入和下拉并进行模糊搜索的方法，其特征在于，所述步骤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代码。4.根据权利要求3所述的基于Input标签实现输入和下拉并进行模糊搜索的方法，其特征在于，所述步骤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中，从而对下拉数据进行展示；步骤...

【专利技术属性】
技术研发人员：刘强，
申请(专利权)人：四川启睿克科技有限公司，
类型：发明
国别省市：