分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 代码编程

html5 模糊匹配搜索框

发布时间:2023-09-06 01:26责任编辑:赖小花关键词:暂无标签

使用bootstrap3-typeahead.js

文件在这里

引用:

 <script type="text/javascript" src="@Url.Content("XXXXX/bootstrap3-typeahead.js")" charset="UTF-8"></script>

input控件

<input id="local_data" autocomplete="off" data-provide="typeahead" type="text" style="background: white" ??????????????????????????????class="input-sm form-control" placeholder="输入关键字以搜索" />

JS样例代码

var initSearchLabel = function () { ???var resultKeyAndValue = {}; ???$("#local_data").typeahead({ ???????source: function (query, process) { ???????????//query是输入的值 ???????????var names = new Array(); ???????????$.ajax({ ???????????????type: "GET", ???????????????url: "XXXXXXXX", ???????????????datatype: "json", ???????????????contentType: "application/json; charset=utf-8", ???????????????cache: false, ???????????????traditional: true, ???????????????async: false, ???????????????success: function (result) { ???????????????????result = JSON.parse(result); ??????????????????//处理得到的JSON数据,var resultList = JSON.parse(result);
           //如果得到的数据是对象数组而不是字符串数组,将要显示的搜索结果处理为一个字符串数组并返回 ;
           //如果在选中以后的处理方法中还需要被选中对象的其他参数,可以将选中的字符串与使用的其他参数做成一个Dictionary备用 ???????????????????for (var i = 0; i < resultList.length; i++) { ???????????????????????names.push(resultList[i].NAME); ???????????????????} ???????????????????return process(names); ???????????????}, ???????????????error: function (result) { } ???????????}); ???????}, ???????updater: function (item) {
      //选中以后的数据处理。item为选中的字符串,resultKeyAndValue为success函数红提到的备用Dictionary,在此取出需要用到的参数。 ???????????var info = resultKeyAndValue[item];var name = info["name"]; ???????????$.ajax({ ???????????????type: "GET", ???????????????url: "YYYYYYYYYYYYYYY" , ???????????????datatype: "json", ???????????????contentType: "application/json; charset=utf-8", ???????????????cache: false, ???????????????traditional: true, ???????????????async: false, ???????????????success: function (result) { ???????????????????result = JSON.parse(result); ???????????????}, ???????????????error: function (result) { } ???????????}); ???????????return item; ???????}, ???????items: 100,//显示的搜索结果 ???????delay: 500 ?//input控件中数据发生变化以后执行请求的间隔 ???});}

该方法匹配的是完整字符串,还达不到百度输入框中的 多个关键字匹配方式

html5 模糊匹配搜索框

原文地址:http://www.cnblogs.com/pangkang/p/7871770.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved