스프링

 

typeahead

 

jQuery UI autocomplete 방법

 

https://offbyone.tistory.com/260

https://twitter.github.io/typeahead.js/examples/

css.

/* scaffolding */
/* ----------- */

html {
  overflow-y: scroll;
  *overflow-x: hidden;
}

.container {
  max-width: 750px;
  margin: 0 auto;
  text-align: center;
}

.tt-menu,
.gist {
  text-align: left;
}

/* base styles */
/* ----------- */

html {
  font: normal normal normal 18px/1.2 "Helvetica Neue", Roboto, "Segoe UI", Calibri, sans-serif;
  color: #292f33;
}


a {
  color: #03739c;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.table-of-contents li {
  display: inline-block;
  *display: inline;
  zoom: 1;
}

.table-of-contents li a {
  font-size: 16px;
  color: #999;
}

p + p {
  margin: 30px 0 0 0;
}

/* site theme */
/* ---------- */

.title {
  margin: 20px 0 0 0;
  font-size: 64px;
}

.example {
  padding: 30px 0;
}

.example-name {
  margin: 20px 0;
  font-size: 32px;
}

.demo {
  position: relative;
  *z-index: 1;
  margin: 50px 0;
}

.typeahead,
.tt-query,
.tt-hint {
  width: 396px;
  height: 30px;
  padding: 8px 12px;
  font-size: 24px;
  line-height: 30px;
  border: 2px solid #ccc;
  -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
          border-radius: 8px;
  outline: none;
}

.typeahead {
  background-color: #fff;
}

.typeahead:focus {
  border: 2px solid #0097cf;
}

.tt-query {
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tt-hint {
  color: #999
}

.tt-menu {
  width: 422px;
  margin: 12px 0;
  padding: 8px 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
          border-radius: 8px;
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
     -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
          box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

.tt-suggestion {
  padding: 3px 20px;
  font-size: 18px;
  line-height: 24px;
}

.tt-suggestion:hover {
  cursor: pointer;
  color: #fff;
  background-color: #0097cf;
}

.tt-suggestion.tt-cursor {
  color: #fff;
  background-color: #0097cf;

}

.tt-suggestion p {
  margin: 0;
}

.gist {
  font-size: 14px;
}

/* example specific styles */
/* ----------------------- */

#custom-templates .empty-message {
  padding: 5px 10px;
 text-align: center;
}

#multiple-datasets .league-name {
  margin: 0 20px 5px 20px;
  padding: 3px 0;
  border-bottom: 1px solid #ccc;
}

#scrollable-dropdown-menu .tt-menu {
  max-height: 150px;
  overflow-y: auto;
}

#rtl-support .tt-menu {
  text-align: right;
}

 

	@GetMapping("mcodeJson.do")
	@ResponseBody
	public List<String> mcodeJson(MaterialVO materialVO ) throws Exception{		
		List<String> mcodeList=managementService.mcodeJson();		
/*		Map<String, Object> resultMap=new HashMap<>();
		resultMap.put("mcodeList", mcodeList);	*/	
		return mcodeList;
	}

 

	

<div id="the-basics">
  <input class="typeahead" type="text" placeholder="States of USA" onkeydown="">
</div>
	

 

데이터

<select id="mcodeJson" resultType="String">
		SELECT mcode FROM 	tbl_material
	</select>

 

<script type="text/javascript">
var substringMatcher = function(strs) {
	  return function findMatches(q, cb) {
	    var matches, substringRegex;

	    // an array that will be populated with substring matches
	    matches = [];

	    // regex used to determine if a string contains the substring `q`
	    substrRegex = new RegExp(q, 'i');

	    // iterate through the pool of strings and for any string that
	    // contains the substring `q`, add it to the `matches` array
	    $.each(strs, function(i, str) {
	      if (substrRegex.test(str)) {
	        matches.push(str);
	      }
	    });

	    cb(matches);
	  };
	};

var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
	  'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
	  'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
	  'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
	  'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
	  'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
	  'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
	  'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
	  'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
];

var countries = new Bloodhound({
	  datumTokenizer: Bloodhound.tokenizers.whitespace,
	  queryTokenizer: Bloodhound.tokenizers.whitespace,
	  // url points to a json file that contains an array of country names, see
	  // https://github.com/twitter/typeahead.js/blob/gh-pages/data/countries.json
	  prefetch: 'http://localhost:8080/erp/management/mcodeJson.do'
});	
	
$('#the-basics .typeahead').typeahead({
	  hint: true,
	  highlight: true,
	  minLength: 1
	},
	{
	  name: 'states',
	 source: substringMatcher(states)
	 //  source: countries
});

</script>

 

 

 

https://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js

 

 

 

2.직접 구현

 

css

@charset "UTF-8";


.tt-menu,
.gist {
  text-align: left;
}

/* base styles */
/* ----------- */



.table-of-contents li {
  display: inline-block;
  *display: inline;
  zoom: 1;
}

.table-of-contents li a {
  font-size: 16px;
  color: #999;
}

.example {
  padding: 30px 0;
}

.example-name {
  margin: 20px 0;
  font-size: 32px;
}

.demo {
  position: relative;
  *z-index: 1;
  margin: 50px 0;
}

.typeahead,
.tt-query,
.tt-hint {
  width: 396px;
  height: 30px;
  padding: 8px 12px;
  font-size: 24px;
  line-height: 30px;
  border: 2px solid #ccc;
  -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
          border-radius: 8px;
  outline: none;
}

.typeahead {
  background-color: #fff;
}

.typeahead:focus {
  border: 2px solid #0097cf;
}

.tt-query {
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tt-hint {
  color: #999
}

.tt-menu {
  width: 422px;
  margin: 12px 0;
  padding: 8px 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
          border-radius: 8px;
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
     -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
          box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

.tt-suggestion {
  padding: 3px 20px;
  font-size: 18px;
  line-height: 24px;
}

.tt-suggestion:hover {
  cursor: pointer;
  color: #fff;
  background-color: #0097cf;
}

.tt-suggestion.tt-cursor {
  color: #fff;
  background-color: #0097cf;

}

.tt-suggestion p {
  margin: 0;
}

.gist {
  font-size: 14px;
}

/* example specific styles */
/* ----------------------- */

#custom-templates .empty-message {
  padding: 5px 10px;
 text-align: center;
}

#multiple-datasets .league-name {
  margin: 0 20px 5px 20px;
  padding: 3px 0;
  border-bottom: 1px solid #ccc;
}

#scrollable-dropdown-menu .tt-menu {
  max-height: 150px;
  overflow-y: auto;
}

#rtl-support .tt-menu {
  text-align: right;
}


#scrollable-dropdown-menu .tt-dropdown-menu {
  max-height: 150px;
  overflow-y: auto;
}

 

constroller

     * Ajax	Bom 등록 autocomplete 
	 */
	@PostMapping("getBySearchList.do")
	@ResponseBody
	public Map<String, Object> getBySearchList(MaterialVO materialVO ) throws Exception{		
		List<MaterialVO> materialList=managementService.getBySearchList(materialVO);
		Map<String, Object> resultMap=new HashMap<>();
		resultMap.put("materialList", materialList);		
		return resultMap;
	}
	
	

 

mybatis

	<select id="getBySearchList" resultMap="managerMaterialMAP" >
		SELECT * FROM 	tbl_material  WHERE  mcode LIKE concat(#{mcode} , '%', '')  LIMIT 0, 7
	</select>


	

 

html

											 <div class="col-sm-4">
												<label class="col-sm-4 control-label">자재 코드:</label>
												<div class="col-sm-8" id="list_0_div">				
													<input type="text" name="list[0].mcode" id="0" class="form-control form-tt" 
													onkeyup="getByMcodeAutoCompleate(this)"   autocomplete="off">		
								<div class="tt-menu" id="tt-menu_0" 
								style="position: absolute; top: 90%; width:120% ; left: 0px; z-index: 100; display: none;">
									<div class="tt-dataset tt-dataset-states" id="tt-dataset_0" >
										
									</div>
								</div>
														
												
												</div>
																					
												
											 </div>

 

js

$(".form-tt").on("focusout", function(event){	
	$(".tt-menu").hide();
});

function getByMcodeAutoCompleate(event){
	var id=$(event).attr("id");
	$.ajax({
		url:'getBySearchList.do',
		data:{
			"mcode":$(event).val()
		},
		type:"post",
		dataType:"json",
		success:function(result){
			if(result.materialList.length>0){
				var html="";
				$.each(result.materialList, function(index, item){				
					html +='<div class="tt-suggestion tt-selectable" onmouseover="ttAutocompleteText(this)">'+item.mcode+'</div>';				
				});	
				
				$("#tt-dataset_"+id).html(html);
				$("#tt-menu_"+id).show();				
			}							
		},
		error:function(result){
			console.log(result);
		}		
	});   
}


//autocomplete 마우스 오버시
function ttAutocompleteText(e){
	var text=$(e).text();
	var div=$(e).parent("div").parent("div").parent("div").children(".form-tt").val(text);
}

 

 

 

 

 

 

about author

PHRASE

Level 60  라이트

고뇌는 위대한 자각과 깊은 심정을 가진 사람에겐 항상 필연적인 것이다. -도스토예프스키

댓글 ( 1)

댓글 남기기

작성

스프링 목록    more