boottstrap suggest 드 롭 다운 상자 사용 설명
3241 단어 bootstrapsuggest.js드 롭 다운 프레임
HTML
<div class="modalTop" id="suit_name_div">
<p> :</p>
<%@ include file="dataJs/item/itemSuggest.jsp" %>
</div>
itemSuggest.jsp
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<link id="bscss" href="plugins/bootstrap/css/bootstrap.min.css"
rel="stylesheet">
<div class="container"
style="width: 40%; margin: 0; padding: 0; margin-left: 16px; float: left;">
<div class="input-group" style="width: 100%">
<i class="clearable fa fa-remove"
style="line-hight: 30px; font-size: 14px"></i>
<input id="suitName"
type="text" style="width: 300px; height: 30px; padding: 0 4px;">
<div class="input-group-btn" style="width: 0%">
<ul class="dropdown-menu dropdown-menu-right" role="menu">
</ul>
</div>
<!-- /btn-group -->
</div>
</div>
<div class="clearfix"></div>
js
(function() {
/**
* json {value: [key:value,key2:value2]};
*/
function init(url, dataList) {
$.ajax({
type : 'post',
async : false,
url : url,
success : function(data) {
for (var i = 0; i < data.length; i++) {
var obj = {};
obj.name = data[i].itemName;
dataList.value.push(obj);
}
}
})
return dataList;
}
/**
*
*/
function suggest(domID, dataList) {
$("#" + domID).bsSuggest({
indexId : 1, // data.value , input
// indexKey: 2, //data.value , input
data : dataList
}).on('onDataRequestSuccess', function(e, result) {
console.log(' json , onDataRequestSuccess ', result);
}).on('onSetSelectValue', function(e, keyword, data) {
console.log('onSetSelectValue: ', keyword, data);
}).on('onUnsetSelectValue', function() {
console.log("onUnsetSelectValue");
});
}
var dataList = {
value : []
};
var url = hostUrl + "item/selectItemList.do";
init(url, dataList);
console.info(dataList);
suggest("suitName", dataList);
}());
도입 할 js
<script src="suggest/src/bootstrap-suggest.js"></script>
<script src="dataJs/item/itemSuggest.js"></script>( js )
<script src="plugins/jQuery/jquery-2.2.3.min.js"></script>
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
부트스트랩 5 스티커Sticky는 페이지의 특정 영역에서 요소를 잠글 수 있도록 하는 구성 요소입니다. 수동 설치(zip 패키지) 부트스트랩 이미지 구성 요소를 활용하고 프로젝트에서 사용하려면 먼저 을 설치해야 합니다. MDB CLI ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.