html代码:
<input type="text" id="affOrganization" name="affOrganization" class="form-control" placeholder="Search..." style="width: 300px" >
<div class="search_suggest" id="gov_search_suggest"> <ul>
</ul>
</div>
css:
.search_suggest{ position:absolute; z-index:999; left:132px; top:41px; width:468px; border:1px solid #999999; display:none; } .search_suggest li{height:24px; overflow:hidden; padding-left:3px; line-height:24px; background:#FFFFFF; cursor:default;list-style-type:none;} .search_suggest li{background:#FFFFFF;}ul{margin-left: 0;padding-left: 0;margin-bottom: 0;}.search_suggest{margin-left: 0;padding-left: 0;}li.hover{background:#DDDDDD;}
js:
$("#affOrganization").on('input', function () {var orgName = $("#affOrganization").val();if (orgName === '') {$("#gov_search_suggest").hide();return;}$.ajax({url: tool.getHttpPrefixView() + url,type: "GET",async: false,success: function (data) {if (data.result.success) {var list = data.rows;if (list.length === 0) {$("#gov_search_suggest").hide();return;}$("#gov_search_suggest").empty();for (let i = 0; i < list.length; i++) {$("#gov_search_suggest").append('<li id="search-result-' + i + '" onclick="Manage.TableOnclick(' + i + ')">' + list[i] + '</li>');}$("#gov_search_suggest").show();} else {$("#gov_search_suggest").hide();}}});})Manage.TableOnclick = function (index) {console.log($('#search-result-' + index).html());$("#affOrganization").val($('#search-result-' + index).html() + "");$("#gov_search_suggest").hide();}