怎么用js写一个类似于百度输入框的搜索插件
2024-08-26 21:01:45
PS:这次做的这个小插件只是在前端实现,并没有经过数据库。需要用到的的框架:1.bootstrap.css的样式 2.Vue.js
最终效果如下:
JS部分:
$(window).click(function () {
content_data.is_selected = 'N';
});
var content_data = {
blog_classify: '',//分类搜索框
classify_data: [//所有分类
{name: "宠物技能培养"},
{name: "宠物健康教育"},
{name: "故事闲谈"},
{name: "宠物图库"},
{name: "宠物知识竞猜"},
{name: "宠物笑话"},
],
classify_new: [],//搜索框选项
is_selected: 'N'//判断搜索框里面的元素有没有被点击
}; var content_el = new Vue({
el: "#blog_el",
data: content_data,
watch: {
blog_classify: function (value) {
content_data.classify_new = [];
if (content_data.is_selected === 'N') {
for (var i = 0; i < content_data.classify_data.length; i++) {
if (content_data.classify_data[i].name.indexOf(value) !== -1) {
content_data.classify_new.push(content_data.classify_data[i].name)
}
}
}
}
},
其中,blog_classify是要在input框里面声明的v-model属性。当blog_classify属性的值发生变化时,会自动调用watch里面对应的方法。
我的想法:把classify_data[]里面的数据全都遍历一遍,用indexof方法判断输入的关键字是否存在于classify_data[]中,
如果存在就添加到classify_new[]中,最后在html里面用v-for生成可选项列表在在前台展示。
前台代码:
<div class="form-group" style="margin-bottom: 0;">
<label class="control-label">分类:</label>
<input v-model="blog_classify" type="text" class="form-control" id="question-classify">
</div>
<div class="col-md-6" style="position: fixed;padding-left: 0">
<div v-if="blog_classify.length>0" class="list-group"
style="max-height: 100px;overflow: auto;">
<a @click="classify_selected(statement)" href="javascript:void(0)"
class="list-group-item" v-for="statement,index in classify_new">{{statement}}</a>
</div>
</div> 前端主要是v-model和v-for这两个属性。v-model对blog_classify属性进行双向绑定,当blog_classify的值发生变化时,classify_new[]的数组内容也会动态改变。v-for会根据classify_new[]的内容动态改变列表的长度和
内容。
这只是个人的一个想法,没有参照其他人的答案。后面写完之后发现百度里面好像还没有用Vue.js做类似的一个东西,就简单写来交流一下。这只是一个简单的写法,
不足的地方希望各位大佬交流更优化的方式。
最新文章
- 学习设计模式第二十七 - GoF之外简单工厂模式
- ORACLE 9i 数据库体系结构图
- Fitnesse初体验
- mysql基本sql语句大全(基础用语篇)
- MYSQL BLOB 字段大小以及个数的限制測试。
- iis7.5 应用程序池 经典模式和集成模式的区别
- 如何使用Reaver破解Wi-Fi网络的WPA密码
- Altera FIFO IP核时序说明
- Java之Iterator
- 运行VsCode缺少libxss.so.1
- css布局------左边宽度不定,右边宽度自动填满剩余空间
- matplotlib绘图pie
- OAF中为MessageTextInput添加加事件处理
- java 基础类库之 SysFun
- jQuery的基本事件
- 4)linux程序设计入门--时间概念
- SQL学习笔记之MySQL索引知识点
- 关于jQuery中的offset()和position()
- 贪心算法,今年暑假不AC
- Python 3 学习笔记之——变量作用域、模块和包