模糊查询下拉列表

前端jsp

监听input文本变化需要

οninput="OnInput (event)"
onpropertychange="OnPropChanged (event)"方法

<div class="row topdis">

							<div class="col-md-2" style="width: 150px">
								<label>物项编号:</label>
							</div>
							<div class="col-md-3">
								<input type="text" class="form-control" name="mateUuid"
									id="mateUuid" placeholder="物项编号" value="${inin.mateUuid}"
									oninput="OnInput (event)"
									onpropertychange="OnPropChanged (event)" />
							</div>


						</div>
						<div id="search_div" style="display: none">
							<select name="search_option" id="search_option"
								style="margin-left: 150px; width: 250px;" size="10">
								<option value="">1</option>
							</select>
						</div>

js代码：

监听事件：

$("#mateUuid").bind("input propertychange", function(event) {
		// console.log($("#input1").val())
		$("#search_div").show();
		var val = $("#mateUuid").val();
		if (val != "") {
			getSelect(val);
		} else {
			//清空输入
			//隐藏模糊输入
			$("#search_div").hide();
		}

	});

获取模糊搜索下拉列表：

	//获取模糊查询下拉列表
	function getSelect(val) {
		$.ajax({
			type : "post",
			url : '${path}/Store/searchList?keyvalue=' + val,
			cache : false,
			dataType : "json",
			success : function(data) {
				$("#search_option").empty();
				var html = "";
				$.each(data, function(i, item) {
					html += " <option value='"+item["mate_code"]+"'>"
							+ item["mate_code"] + "     |     " + item["mate_name"]
							+ "</option>"

				});
				$("#search_option").append(html);
			}
		});
	}

监听select事件改变：

	$(document).ready(function() {
		$('#search_option').change(function() {
			var valuuid=$(this).children('option:selected').val();
			$('#mateUuid').val(valuuid);
		})
	})