第3.1.4章 WEB系統最佳實踐 js控件之bootstrap-suggest-plugin

bootstrap-suggest-plugin插件位址，這是一個簡單的編輯提示控件

bootstrap-suggest-plugin demo位址

頁面如下面所示，使用此控件

<div class="form-group">
					<label class="col-xs-3 text-right control-label">庫管員:</label>
					<div class="col-xs-9">
						<div class="input-group">
							<input type="text" class="form-control no-padding" id="keeperUserName" value="${keeperUserName}" />
							<div class="input-group-btn" style="width:1px;">
								<ul class="dropdown-menu dropdown-menu-right" role="menu"></ul>
							</div>
						</div>
					</div>
				</div>
           

js側這裡用到了兩個字段keeperUserName,keeperUser。其中keeperUser是用來儲存使用者資料的id，因為很多form表單儲存的資料庫中都是資料的id，而不是資料顯示值。

$('#keeperUserName').bsSuggest({
    		url:ctx+'/fontalUser/find?filter_likes_name=',
    		getDataMethod:'url',
    		effectiveFields:['username','name','phone'],
    		effectiveFieldsAlias:{username:'使用者賬号',name:'姓名',phone:'手機号'},
    		showHeader:true,
    		allowNoKeyword:false,
    		multiWord:false,
    		idField:'id',
    		keyField:'name'
    	}).on('onSetSelectValue', function (e, keyword, data) {
            $('#keeperUser').val(data.id);
        });