Source의 기능 - source-ui gineung

Question

<form> 태그의 autocomplete 속성

HTML <form> 태그 ⇒

정의 및 특징

<form> 태그의 autocomplete 속성은 <form> 요소에서 자동 완성 기능을 사용할지 여부를 명시합니다.

목차 Show

<form> 태그의 autocomplete 속성
[ jQuery ] Autocomplete

autocomplete 속성값을 on으로 명시하면, 브라우저는 사용자가 이전에 입력했던 값들을 기반으로 사용자가 입력한 값과 비슷한 값들을 드롭다운 옵션으로 보여줍니다.

이 속성을 사용하면 <form> 요소에서는 자동 완성 기능을 사용하면서 특정 <input> 요소에서는 자동 완성 기능을 사용하지 않거나 그 반대로 설정하는 것도 가능합니다.

문법

속성값

속성값		설명
on		기본값으로, 브라우저는 사용자가 이전에 입력한 값을 기반으로 자동으로 값을 완성함.
off		브라우저가 자동으로 값을 완성하지 않으므로, 사용자는 매번 각 입력 필드에 값을 끝까지 입력해야 함.

예제

<form action="/examples/media/action_target.php" autocomplete="off">
    이름 : <input type="text" name="st_name"><br>
    학번 : <input type="text" name="st_id"><br>
    학과 : <input type="text" name="department"><br>
    <input type="submit">
</form>

코딩연습 ▶

지원하는 브라우저 및 버전

속성명

autocomplete

지원함

HTML5에서 변경된 사항

<form> 요소의 autocomplete 속성은 HTML5에서 새롭게 추가된 요소입니다.

연습문제

연습문제1
연습문제2
연습문제3
연습문제4
연습문제5

☆

jQuery

[ jQuery ] Autocomplete

Hoyoung@ 2016. 10. 9. 09:29

● 사용법

<!-- 이게 없으면 한글 검색 x -->
<meta charset="utf-8">
<!-- jQuery ui style sheet -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<!-- jQuery library -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- jQuery ui library -->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

Search:

/**
* source - 검색될 배열
*/
$("#search").autocomplete({source: array});

● 적용 예제

<html lang="en">
<head>
    <title>jQuery UI Autocomplete - Default functionality</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 이게 없으면 한글 검색 x -->
    <meta charset="utf-8"> 
    <!-- jQuery ui style sheet -->
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <!-- jQuery library -->
    <script src="https://code.jquery.com/jquery.js"></script>
    <!-- jQuery ui library -->
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
        $(document).ready(function () {
            var array = [
                "김밥",
                "김치",
                "김치찌개",
                "김치김밥",
                "김밥천국",
                "참치김밥",
                "김밥나라"
            ];

            /**
             * source - 검색될 배열
             */
            $("#search").autocomplete({source: array});
        });
    </script>
</head>
<body>
<div class="ui-widget">
    <label for="search">Search: </label>
    <input id="search">
</div>
</body>
</html>

● 결과물

http://codeman77.ivyro.net/study/autocomplete.html

● 추가적인 사용법

■ 참조

1. JQuery UI - Autocomplete

jqueryui.com/autocomplete/

Autocomplete | jQuery UI

Autocomplete Enables users to quickly find and select from a pre-populated list of values as they type, leveraging searching and filtering. The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are tags for progr

jqueryui.com

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

jsfiddle.net

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

jsfiddle.net

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

jsfiddle.net

jQuery autocomplete 자동완성 기능 만들기 jQuery autocomplete 옵션 Autocomplete 옵션 jQuery autocomplete style Jquery autocomplete source jQuery autocomplete focus