当前位置：文档之家 › JQuery下拉框模糊查询

JQuery下拉框模糊查询

  • 格式：docx
  • 大小：19.92 KB
  • 文档页数：6

2012-04-10 14:24C#+jQuery+div实现下拉框信息提示模糊搜索结果（百度、google搜索提示框）实现效果：用户输入查询字符串，当文本框内容变化时，显示下拉框为用户提示完整信息，并可以实现选中所查信息后获得对应ID而进行更进一步的关联显示。

（比如搜某一公司，选中公司后在根据公司ID获得公司产品）。

推荐jQuery Autocomplete 插件：（演示地址）http://jquery.bassistance.de/autocomplete/demo/?主人博客：http://bassistance.de/ (还有好多有用的Plugins)手动实现：在输入框所在的页面：引入jquery开发包：样式及脚本<script src="../../css/jquery-1.7.1.min.js"type="text/javascript"></script><style type="text/css" media="screen">body{font: 11px arial;}.suggest_link_alt{background-color: #FFFFFF;text-align:right;cursor:hand;padding: 2px 6px 2px 6px;z-index:101;}.suggest_link{background-color: #FFFFFF;padding: 2px 6px 2px 6px;z-index:101;}.suggest_link_over{background-color: #E8F2FE;padding: 2px 6px 2px 6px;z-index:101;}#search_suggest{z-index:100;position: absolute; background-color: #FFFFFF; text-align: left;border: 1px solid #000000; }#search_suggestR{z-index:100;position: absolute; background-color: #FFFFFF; text-align: left;border: 1px solid #000000; }/*input*/.input_on{margin:2px 8px 0pt 10px; height:18px;border:1px solid #999; background-color:#FFFFCC; }.input_off{margin:2px 8px 0pt 10px; height:18px;border:1px solid #CCC; background-color:#FFF;}.input_move{margin:2px 8px 0pt 10px; height:18px;border:1px solid #999; background-color:#FFFFCC; }.input_out{/*height:16px;默认高度*/ margin:2px 8px 0pt 10px; height:18px;border:1px solid #CCC; background-color:#FFF;}</style><script language="javascript" type="text/javascript">function DivSetVisible(divid, frameid, state) {varDivRef = document.getElementById(divid);varIfrRef = document.getElementById(frameid);if (state) {DivRef.style.display = "block";IfrRef.style.width = DivRef.offsetWidth;IfrRef.style.height = DivRef.offsetHeight;IfrRef.style.top = DivRef.style.top;IfrRef.style.left = DivRef.style.left;IfrRef.style.zIndex = DivRef.style.zIndex - 1;IfrRef.style.display = "block";}else {DivRef.style.display = "none";IfrRef.style.display = "none";}}</script><script language="javascript" type="text/javascript">//当输入框的内容变化时，调用该函数function searchSuggest() {if ($("#txtSearch").val() != "" && $("#txtSearch").val()!=null) {$.ajax({type: "GET",url: "../../AJAX.aspx",data: "type=searchCompany&searchText=" + escape($("#txtSearch").val()), success: function(result) {varsourceText = result.split("**");if (sourceText.length> 1) {DivSetVisible("search_suggest", "DivShim", true);//$("#search_suggest").show();$("#search_suggest").html("");for (vari = 0; i<sourceText.length - 1; i++) {var s = ' <div onmouseover="javascript:suggestOver(this);"';s += ' onmouseout= "javascript:suggestOut(this);" ';s += ' onclick= "javascript:setSearch(this.innerHTML,this.id);" ';s += ' class= "suggest_link" id="' + sourceText[i].split(",")[0] + '">' + sourceText[i].split(",")[1] + '</div>';$("#search_suggest").html($("#search_suggest").html() + s);}$("#search_suggest").html($("#search_suggest").html() + "<div class= \"suggest_link_alt\"onclick=\"javascript:DivSetVisible('search_suggest', 'DivShim', false);\">关闭提示</div>");}else {DivSetVisible("search_suggest", "DivShim", false);//$("#search_suggest").hide();}}});}else {DivSetVisible("search_suggest", "DivShim", false);//$("#search_suggest").hide();}}functionsuggestOver(div_value) {div_value.className = "suggest_link_over";}functionsuggestOut(div_value) {div_value.className = "suggest_link";}function setSearch(obj,id) {$("#txtSearch").val(obj);$("#hidCompId").val(id);$.ajax({type: "GET",url: "../../AJAX.aspx",data: "type=getCompanyJob&companyId=" + id,success: function(result) {$("#drpPost").empty();varsourceText = result.split("**");if (sourceText.length> 1) {for (vari = 0; i<sourceText.length - 1; i++) {$("<option value='" + sourceText[i].split(",")[0] + "'>" + sourceText[i].split(",")[1]+ "</option>").appendTo("#drpPost")}}});$("#search_suggest").html("");DivSetVisible("search_suggest", "DivShim", false);//$("#search_suggest").hide();}</script>HTML:<input type="text" id="txtSearch" name="txtSearch"onchange="searchSuggest();" size="50" class="input_out input"onfocus="this.className='input_on';this.onmouseout=''"onblur="this.className='input_off';this.onmouseout=function(){this.cl assName='input_out'};" onmousemove="this.className='input_move'" onmouseout="this.className='input_out'" /><br /><div id="search_suggest" style="display:none; z-index:100;"></div><iframe id="DivShim" src="javascript:false;" scrolling="no" frameborder="0" style="position:absolute; top:0px; left:0px; display:none;"></iframe><input type="hidden" id="hidCompId" />AJAX.aspx实现：<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AJAX.aspx.cs" Inherits="AJAX" %>AJAX.aspx.cs:stringsearchText = Request["searchText"];StringBuilder result = new StringBuilder(100);if (!string.IsNullOrEmpty(searchText)){SqlDataReaderdr = null;try{dr = SqlHelper.ExecuteReader(SqlHelper.ConnectionString, CommandType.Text,"select top 20 Identifier,Company from UserInfo where company like '%'+@keywords+'%'",new SqlParameter("@keywords", searchText));while (dr.Read())result.Append(dr[0].ToString() + "," + dr[1].ToString() + "**"); }}catch{}finally{if (dr != null && !dr.IsClosed){dr.Close();dr.Dispose();}}}Response.Write(result.ToString());。

合集下载

JQueryselect（下拉框）操作方法汇总

JQueryselect（下拉框）操作方法汇总

JQueryselect（下拉框）操作⽅法汇总1. 获取选中项：获取选中项的Value值：复制代码代码如下:$('select#sel option:selected').val();或者复制代码代码如下:$('select#sel').find('option:selected').val();获取选中项的Text值：复制代码代码如下:$('select#seloption:selected').text();或者复制代码代码如下:$('select#sel').find('option:selected').text();2. 获取当前选中项的索引值：复制代码代码如下:$('select#sel').get(0).selectedIndex;3. 获取当前option的最⼤索引值：复制代码代码如下:$('select#sel option:last').attr("index")4. 获取DropdownList的长度：复制代码代码如下:$('select#sel')[0].options.length;或者复制代码代码如下:$('select#sel').get(0).options.length;5. 设置第⼀个option为选中值：复制代码代码如下:$('select#sel option:first').attr('selected','true')或者复制代码代码如下:$('select#sel')[0].selectedIndex = 0;6. 设置最后⼀个option为选中值：复制代码代码如下:$('select#sel option:last).attr('selected','true')7. 根据索引值设置任意⼀个option为选中值：复制代码代码如下:$('select#sel')[0].selectedIndex =索引值;索引值=0,1,2....8. 设置Value=4 的option为选中值：复制代码代码如下:$('select#sel').attr('value','4');或者复制代码代码如下:$("select#sel option[value='4']").attr('selected', 'true');9. 删除Value=3的option：复制代码代码如下:$("select#sel option[value='3']").remove();10.删除第⼏个option：复制代码代码如下:$(" select#sel option ").eq(索引值).remove();索引值=0,1,2....如删除第3个Radio:复制代码代码如下:$(" select#sel option ").eq(2).remove();11.删除第⼀个option：复制代码代码如下:$(" select#sel option ").eq(0).remove();或者复制代码代码如下:$("select#sel option:first").remove();12. 删除最后⼀个option：复制代码代码如下:$("select#sel option:last").remove();13. 删除dropdownlist:复制代码代码如下:$("select#sel").remove();14.在select后⾯添加⼀个option:复制代码代码如下:$("select#sel").append("<option value='6'>f</option>"); 15. 在select前⾯添加⼀个option:复制代码代码如下:$("select#sel").prepend("<option value='0'>0</option>"); 16. 遍历option：复制代码代码如下:$(' select#sel option ').each(function (index, domEle) { //写⼊代码});。

JQuery打造下拉框联动效果

JQuery打造下拉框联动效果

JQuery打造下拉框联动效果做联动效果，若是⽤纯JavaScript来做，往往须要辅助页⾯保存须要刷新的结果集，然后渲染到原页⾯。

考虑将须要动态刷新的内容⾃⼰主动拼接到前⼀个下拉框之后，当前⼀个下拉框onchange后，同级的后⾯的下拉框所有清除，然后⼜⼀次拼接刷新的内容。

⽤JQuery实现⽐較easy，代码以省市联动效果为例实现。

JSP页⾯代码例如以下：<li id="base"><p>⽣源地:</p><label><select id="provinceCode" name="provinceCode" onchange="refreshCity()"><option value="">所有</option><c:forEach items="${provinceInfoList}" var="provinceInfo"><option value="${provinceInfo.code}">${provinceInfo.provinceName}</option></c:forEach></select></label></li>JavaScript代码例如以下：function refreshCity(){if($('#provinceCode').find('option:selected').val() == ""){$('#provinceCode').parent().nextAll('lable').remove();return;}//省份名称var provinceName = $('#provinceCode').find('option:selected').text();provinceName = provinceName.substring(0,provinceName.length-4);// 发出Json请求，查询⼦下拉框选项数据$.getJSON("<%=basePath%>baseInfo_getCitiesByProvinceId", {proviceCode : $('#provinceCode').val()}, function(data) {// 假设有⼦选项，则创建⼦下拉框if(data != null){// 删除下拉框⽗级<lable>后的全部同级<lable>$('#provinceCode').parent().nextAll('lable').remove();var childId = "city";// 推断是否存在下⼀级下拉框不存在就创建if($('#'+childId).length == 0){// 创建⼀个<li>并创建⼀个<select>加⼊到id为extra的<ul>中$("<lable><select id='"+childId+"' name='"+childId+"' ></select></li>").appendTo($('#base'));}else{//清空⼦下拉框内容$('#' + childId).empty();}// 遍历json串，填充⼦下拉框$.each(data.city, function(i, item) {$('#' + childId).append("<option value='"+item.code+"'>" + AndCode+ "</option>");});}});}依据省份获取市的代码例如以下：public void getCitiesByProvinceCode(String proviceCode, HttpServletResponse response) throws JsonParseException, JsonMappingException, JSONException, IOException{ ProvinceInfo provinceInfo = this.provinceAndCityInfoService.getProvinceInfoByProperty("code", proviceCode);List<CityInfo> cityList = this.provinceAndCityInfoService.getCityListByProperty("belongProvinceId", provinceInfo.getId()+"");// 初始化准备输出的Json串String cityJson = "";// 遍历集合，构造json串if (cityList.size() > 0) {cityJson = "{\"city\":[";// 拼接查询到的⼦项for (int i = 0; i < cityList.size(); i++) {CityInfo city = cityList.get(i);String temp = "{\"code\":\"" + city.getCode()+ "\",\"nameAndCode\":\"" + city.getName()+"("+ city.getCode() +")"+ "\"}";// 假设是集合中最后⼀项，则拼接结束符，否则⽤","隔开if (i == cityList.size() - 1) {cityJson = cityJson + temp + "]}";} else {cityJson = cityJson + temp + ",";}}}// 设置输出的字符集和类型并输出json串response.setCharacterEncoding("UTF-8");response.setContentType("json");response.getWriter().print(cityJson); }。

带搜索框的jQuery下拉框插件

带搜索框的jQuery下拉框插件

带搜索框的jQuery下拉框插件由于下拉框的条数有⼏⼗个，于是打算找⼀个可以搜索查找功能的下拉框，刚开始在⽹上看了⼏个，都是有浏览器兼容性问题，后来看到这个“”，看演⽰代码简单易⽤，⽀持多个浏览器。

不过在使⽤过程中碰到了⼏个问题，先后解决了。

1、多个下拉框放在⼀起会出现遮挡的问题，原⽂评论有个解决⽅法：在jquery.searchableSelect.js⽂件⾥⾯的代码⾥⾯加上下⾯2⾏带注释的代码show: function() {this.dropdown.removeClass('searchable-select-hide');this.input.focus();this.status = 'show';this.setPriviousAndNextVisibility();this.dropdown.css('z-index', 100); //打开下拉列表时调⾼z-index层级}, hide: function() {if (!(this.status === 'show')) return;if (this.items.find(':not(.searchable-select-hide)').length === 0) this.input.val('');this.dropdown.addClass('searchable-select-hide');this.searchableElement.trigger('focus');this.status = 'hide';this.dropdown.css('z-index', 1); //关闭下拉列表时恢复z-index层级},2、原⽂⽤的是jquery-1.11.1.min.js，但是整个项⽬⽤的是jquery-1.7.2.js，在chrome浏览器F12调试⼀加载页⾯会出现错误信息：Uncaught TypeError: $.expr.createPseudo is not a function$(...).searchableSelect is not a function点进去提⽰$.expr.createPseudo有语法错误猜测是jquery版本问题，果然，搜索了⼀下，$.expr.createPseudo是jquery1.8.1版本以上⽀持的。

Winform如何实现ComboBox模糊查询

Winform如何实现ComboBox模糊查询

Winform如何实现ComboBox模糊查询 最近朋友问了⼀个关于Winform实现ComboBox模糊查询的知识点，⾃⼰好久没有搞Winform了，就上⼿练了⼀下，废话不多说，进⼊正题。

前台设计： 前台就是⼀个简单的Form窗体+⼀个ComboBox控件。

思路整理： 1.⽤⼀个List<string> listOnit存放初始化数据，⽤⼀个List<string> listNew存放输⼊key之后，返回的数据。

2.⽤上⾯的listOnit初始化ComboBox数据源进⾏绑定。

3.在TextUpdate⽅法内部，添加实现⽅法。

⾸先进⼊⽅法，先清除ComboBox的内容，然后将输⼊的内容去listOnit初始化的数据中⽐对，找出对应数据，然后放⼊listNew存放数据，最后将listNew数据重新赋值给 ComboBox。

后台代码实现：using System;using System.Collections.Generic;using ponentModel;using System.Data;using System.Drawing;using System.Linq;using System.Text;using System.Windows.Forms;namespace TimerDemo{public partial class Form2 : Form{//初始化绑定默认关键词（此数据源可以从数据库取）List<string> listOnit = new List<string>();//输⼊key之后，返回的关键词List<string> listNew = new List<string>();public Form2(){InitializeComponent();}private void Form2_Load(object sender, EventArgs e){//调⽤绑定BindComboBox();}/// <summary>/// 绑定ComboBox/// </summary>private void BindComboBox(){listOnit.Add("张三");listOnit.Add("张思");listOnit.Add("张五");listOnit.Add("王五");listOnit.Add("刘宇");listOnit.Add("马六");listOnit.Add("孙楠");listOnit.Add("那英");listOnit.Add("刘欢");/** 1.注意⽤Item.Add(obj)或者Item.AddRange(obj)⽅式添加* 2.如果⽤DataSource绑定，后⾯再进⾏绑定是不⾏的，即便是Add或者Clear也不⾏*/boBox1.Items.AddRange(listOnit.ToArray());}private void comboBox1_TextChanged(object sender, EventArgs e){/** 不能⽤TextChanged操作，当boBox1.DroppedDown为True时，选择项上下键有冲突*/}private void comboBox1_TextUpdate(object sender, EventArgs e){//清空comboboxboBox1.Items.Clear();//清空listNewlistNew.Clear();//遍历全部备查数据foreach (var item in listOnit){if (item.Contains(boBox1.Text)){//符合，插⼊ListNewlistNew.Add(item);}}//combobox添加已经查到的关键词boBox1.Items.AddRange(listNew.ToArray());//设置光标位置，否则光标位置始终保持在第⼀列，造成输⼊关键词的倒序排列boBox1.SelectionStart = boBox1.Text.Length;//保持⿏标指针原来状态，有时候⿏标指针会被下拉框覆盖，所以要进⾏⼀次设置。