[jquery] autocomplete

■ 참조

1. JQuery UI - Autocomplete

jqueryui.com/autocomplete/

Autocomplete | jQuery UI

2. autocomplete with id and value (youtube)

www.youtube.com/watch?v=0tHDRJ7ud6o

---

1. 완전 기본 구조

var auto_source = [ 'apple', 'banana', 'chocolate' ];

$('#autoInputTag').autocomplete({
	source: auto_source
});

 

2. 유용한 속성 파헤치기

- source / minLength / autofocus / select

var auto_source = [ 'apple', 'banana', 'chocolate' ];

$('#autoInputTag').autocomplete({
	source: auto_source,
	minLength: 2,
	autoFocus: true,
	select: function (event, ui) { }
});

source	Array/String/Function	autocomplete에 사용할 소스 데이터
minLength	Integer	검색기능을 활성화할 최소 글자 개수 값이 2면, 2글자를 입력해야 검색된다
autoFocus	boolean	소스 데이터에서 검색했을 때 맨 위 데이터에 자동 포커스
select	Function	autocomplete에서 사용자가 데이터를 선택했을 때 이벤트

 

3. 내 입맛에 맞게 수정하기 1

목표: 상위 Select 박스에서 선택한 항목에 따라 다른 소스 데이터 바인딩하기

var data = {
	'bird': [ 'fly', 'sit', 'tweet', 'sing', 'eat worm' ],
  'dog': [ 'bark', 'run', 'follow', 'sleep' ]
}

$('#action').autocomplete({
	source : data['bird']
});

$('#animal').change(function() {
	var animal = $(this).val();
  $('#action').autocomplete('option', 'source', data[animal]);
});

jsfiddle.net/ydf7w50b/3/

Edit fiddle - JSFiddle - Code Playground

 

4. 내 입맛에 맞게 수정하기 2

목표: input에 검색하는 키워드와 실제 검색 완료했을 때 input에 보여줄 값 분리하기

var data = {
	'bird': [ 
 		{ label: 'Fly', value: 'fly' }, 
  		{ label: 'Sit', value: 'sit' },
		{ label: 'Tweet', value: 'tweet' },
 		{ label: 'Sing', value: 'sing' },
 		{ label: 'Eat', value: 'eat worm' }
 	],
 	'dog': [ 
  		{ label: 'Bark', value: 'bark' },
		{ label: 'Run', value: 'run' },
		{ label: 'Follow', value: 'follow' },
		{ label: 'Sleep', value: 'sleep' }
	]
}

$('#action').autocomplete({
	source : data['bird']
});

$('#animal').change(function() {
	var animal = $(this).val();
  $('#action').autocomplete('option', 'source', data[animal]);
});

jsfiddle.net/ydf7w50b/5/

Edit fiddle - JSFiddle - Code Playground

 

5. 내 입맛에 맞게 수정하기 3

목표: 검색어 완성되는 타이밍에 하단에 문장으로 표시하기 (select 활용안)

var data = {
	'bird': [ 
  	{ label: 'Fly', value: 'fly', 'id': 0 }, 
    { label: 'Sit', value: 'sit', 'id': 1 },
    { label: 'Tweet', value: 'tweet', 'id': 2 },
    { label: 'Sing', value: 'sing', 'id': 3 },
    { label: 'Eat', value: 'eat worm', 'id': 4 }
  ],
  'dog': [ 
  	{ label: 'Bark', value: 'bark', 'id': 5 },
    { label: 'Run', value: 'run', 'id': 6 },
    { label: 'Follow', value: 'follow', 'id': 7 },
    { label: 'Sleep', value: 'sleep', 'id': 8 }
	]
}

$('#action').autocomplete({
      source: function (request, response) {
                var term = request.term; // search keyword
                var filteredData = data['bird'].filter(x => (x.label.indexOf(term) >= 0));
                response($.map(filteredData, function (item) {
                    return {
                        label: item.label,
                        value: item.value,
                        'data-id': item.id
                    }
                }))
            },
    autoFocus: true,
    select: function(event, ui) {
        $('#sentence').text(`${ui.item['data-id']} ${ui.item.value}`);
  }
});

$('#animal').change(function() {
	var animal = $(this).val();
  var source = data[animal];
  $('#action').autocomplete('option', 'source', function (request, response) {
  							var term = request.term; // search keyword
                var filteredData = source.filter(x => (x.label.indexOf(term) >= 0));
                response($.map(filteredData, function (item) {
                    return {
                        label: item.label,
                        value: item.value,
                        'data-id': item.id
                    }
                }))
            });
});

jsfiddle.net/u279t584/

Edit fiddle - JSFiddle - Code Playground