[jQueryUI] 자동완성기능 후보 목록에 조건추가

Front-End/jQueryUI

[jQueryUI] 자동완성기능 후보 목록에 조건추가 - autocomplete(source)

리딩리드 2017. 1. 31. 17:39

자동완성기능 후보 목록에 조건추가 - autocomplete(source)

1. 정의

- 후보 목록중에 특정 한 값만 나오도록 source 매개변수에 콜백함수를 설정한다

2. 구문

$('#keywd').autocomplete({ source : function(request, response){ response( $.grep(data, function(v){ return v.indexOf(request.term) === 0; }) ); }, minLength:2 });

v : 배열 목록에 있는 값

request.term : 검색하는 값

3. 구현

<!DOCTYPE html> <head> <meta charset="UTF-8" /> <title>jQuery UI</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/redmond/jquery-ui.min.css" /> <style> </style> </head> <form> <label for="keywd">Key</label> <input id="keywd" type="search" size="20" maxlength="40"/> </form> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script> <script> $(function() { var data=[ 'accelerando', 'accent', 'adagio', 'best', 'bee', 'bird' ]; $('#keywd').autocomplete({ source : function(request, response){ response( $.grep(data, function(v){ return v.indexOf(request.term) === 0; }) ); }, minLength:2 }); }); </script>

- 결과는 같다.