js实现文本框输入时同步出现模糊搜索列表

做项目的时候遇到类似于淘宝搜索【鞋】，出现【皮鞋】【运动鞋】这样的模糊搜索功能需求，效果如下：

下面是简单实现方式

html部分

<div class="fubao-serch">
			<div class="mui-input-row mui-search">
				<input type="search" id="selectzx" class="mui-input-clear" autocomplete="off" placeholder="搜索资讯">
			</div>
			<div id="historybox">
				<ul id="fuzzylist">
					<!--<li>
							<div class="bag-title">是吗是吗是吗是吗是吗是吗是吗</div>
					</li>-->
				</ul>
			</div>
		</div>

CSS部分

	        /*搜索框样式*/
			
			.fubao-serch {
				margin: 10px 15px -15px 15px;
				border-radius: 25px;
			}
			//搜索列表框样式
			#historybox {
				width: 100%;
				position: absolute;
				top: 55px;
				left: 0;
				/* 隐藏 */
				display: none;
				font-size: 16px;
				margin-top: 10px;
				background-color: #F6F6F6;
				color: #353535;
				z-index: 900;
			}
			
			li {
				list-style: none;
				height: auto;
				line-height: 35px;
				width: 100%;
				margin-left: -20px;
				padding-top: 10px;
			}
			
			.bag-title {
				display: inline;
				width: auto;
				float: left;
			}

JS部分

//输入框正在输入时
		$("#selectzx").on('input', function() {
			if($('#selectzx').val() != "") {
				FuzzySearch($('#selectzx').val());
				$('#historybox').css('display', 'block');
			} else {
				$('#historybox').css('display', 'none');
				$('#selectzx').val() == "";
			}
			//点击X的时候关闭模糊搜索框
			$(document).one("click", function() {
				$('#historybox').css('display', 'none');
			});
		})

          //模糊搜索
		function FuzzySearch(_serchtext) {

			mui.Validation_Api("XXX/XXX/XXX", {  //调用后端接口
				"keyWord": _serchtext
			}, function(data) {
				if(data.respCode == "200") {
					var pn = document.getElementById("fuzzylist"),
						str = "";
					for(var i = 0; i < data.data.rows.length; i++) {
						str += '<li onclick=\'JacyWindow("FuBaoSouSuoDetil.html?word=' + _serchtext + '&type=0", "FuBaoSou", "福宝搜索")\'>';
						str += '<div class="bag-title">' + data.data.rows[i].nwsTitle.replace(eval(reg), "<span style='color: #015293;'>$&</span>") + '</div>';
						str += '</li>';
					}
					pn.innerHTML = str;
				} else {
					mui.toast("错误：" + data.message);
				}
			});

		}