마카로닉스

1661 No

검색 autocomplete

2019-09-28 20:57:05 By 라이트 0 1194 댓글수 5 포스트 하기

11월 2024
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

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>

$(".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);
}