js jquery javascript bootstrap 下拉搜索

<?php TPL::output('manage/header.tpl.htm'); ?>

<div class="main-content">
	<form class="card card-bordered mb-0" name="form_car" action="/manage/car/main/_save/" method="post" data-provide="form validation" data-disable="false" novalidate="true">
		
		<div class="card-body form-type-nomral">
			<input type="hidden" name="id" value="<?php echo $this->car_info['id']; ?>">
			<input type="hidden" name="user_id" value="<?php echo $this->car_info['user_id']; ?>">

			<div class="form-group">
				<div class="btn-group bootstrap-select form-control" data-object="province">
					<button type="button" class="btn dropdown-toggle bs-placeholder btn-light" data-toggle="dropdown" role="button" title="选择用户" aria-expanded="false">
						<span class="filter-option pull-left" style="width: 200px;">搜索选择用户</span>&nbsp;
						<span class="bs-caret">
							<span class="caret"></span>
						</span>
					</button>            
					<div class="dropdown-menu w-100" x-placement="bottom-start" style="position: absolute; top: 36px; left: 0px; will-change: top, left;">
						<div class="px-2 py-2 bg-lighter">
							<input type="text" class="form-control form-control-sm" oninput="get_search_user_data()">
						</div>
							
						<div class="wraper ps-container ps-theme-default" style="max-height:300px;" data-ps-id="937f9227-52e1-29d3-d28f-436272030b8d"></div>
					</div>        
				</div>
			</div>
		</div>

		<div class="card-footer">
			<button class="btn btn-primary btn-sm" type="submit">确定</button>
			<button class="btn btn-pure btn-sm" type="button" onclick="history.go(-1);">取消</button>
		</div>
	</form>
</div>

<script>
	var pull_left = $(".pull-left");
	var id = $("input[name='id']").val();
	var user_id = $("input[name='user_id']");

	var form_control_sm = $(".form-control-sm");
	var ps_container = $(".ps-container");
	var dropdown_item = $(".dropdown-item");
	
	function select_user(obj) {
		$(".dropdown-item").removeClass('active');
		$(obj).addClass('active');
		pull_left.html($(obj).html());
		user_id.val($(obj).attr('data-index'));
	}

	function add_a_label(obj)
	{
		let flag = true;
		let a_label;
		user_id.val('0');

		for (let key  in obj) {
			a_label = `<a class="dropdown-item `;

			if (flag) {
				user_id.val(key);
				a_label += `active`;
				flag = false;
			}

			a_label += `" href="#" data-index="${key}" onclick="select_user(this)">${obj[key]}</a>`;
			ps_container.append(a_label);
  		}
	}

	function get_search_user_data()
	{
		$(".dropdown-item").remove();

		// 发送请求
	    $.ajax({
			url: `/manage/car/get_search_user_data/`,
			type: 'post',
			data: { id: id, user_id: user_id.val(), title: form_control_sm.val() },
			success: res => {
				console.log(res);
				if (res.code === 200) {
					add_a_label(res.data);
				} else {
					swal({
						title: res.msg,
						type: 'error',
					})
				}
			},
	    })
	}
 
	$('form[name="form_car"]').data('after', function(ret){
		app.toast(ret.msg, 'success');
	
		location.href = '/manage/car/main/?id=' + ret.data.id;
	});
</script>

<?php TPL::output('manage/footer.tpl.htm'); ?>