'jQuery AutoComplete'에 해당되는 글 1건

autocomplete  - 텍스트 입력창에 글자를 입력하면 recommend text 를 serve 해주는 것.


중요한 부분이 source 부분인데 recommend text 배열이라고 할 수 있다. 공식홈에서는 이렇게 가이드를 하고 있다


source Type: Array or String or FunctionObject request, Function response( Object data ) )

Default: none; must be specified
Defines the data to use, must be specified.

Independent of the variant you use, the label is always treated as text. If you want the label to be treated as html you can use Scott González' html extension. The demos all focus on different variations of the sourceoption - look for one that matches your use case, and check out the code.

label 이라는 key가 text로 취급된다. source 옵션은 3가지가 있다. 

Multiple types supported:

  • Array: An array can be used for local data. There are two supported formats:
    • An array of strings: [ "Choice1", "Choice2" ]
    • An array of objects with label and value properties: [ { label: "Choice1", value: "value1" }, ... ]
    The label property is displayed in the suggestion menu. The value will be inserted into the input element when a user selects an item. If just one property is specified, it will be used for both, e.g., if you provide only value properties, the value will also be used as the label.

우선 array는 string의 모임으로 구성 될 수도 있고 label key와 value 키를 가진 객체의 모임으로 구성될 수도 있다.
라벨 속성은 recommend 되는 텍스트이고 value는 눌렀을때 input에 입력되는 값이다. 만약 이렇게 key를 주지 않고 그냥 단어의 나열로 구성하면 두 속성을 모두 사용 하게 된다. 

  • String: When a string is used, the Autocomplete plugin expects that string to point to a URL resource that will return JSON data. It can be on the same host or on a different one (must provide JSONP). The Autocomplete plugin does not filter the results, instead a query string is added with a term field, which the server-side script should use for filtering the results. For example, if the source option is set to "http://example.com" and the user types foo, a GET request would be made to http://example.com?term=foo. The data itself can be in the same format as the local data described above.
  • Function: The third variation, a callback, provides the most flexibility and can be used to connect any data source to Autocomplete. The callback gets two arguments:
    • request object, with a single term property, which refers to the value currently in the text input. For example, if the user enters "new yo" in a city field, the Autocomplete term will equal "new yo".
    • response callback, which expects a single argument: the data to suggest to the user. This data should be filtered based on the provided term, and can be in any of the formats described above for simple local data. It's important when providing a custom source callback to handle errors during the request. You must always call the response callback even if you encounter an error. This ensures that the widget always has the correct state.

    When filtering data locally, you can make use of the built-in $.ui.autocomplete.escapeRegex function. It'll take a single string argument and escape all regex characters, making the result safe to pass to new RegExp().


ajax를 이용하여 source를 구성할 때 function을 많이 쓴다.

request object를 이용해 http post로 input text를 서버에 전송한다. 이때 서버에서 input text는 term property로 구분된다.

예를 들어 node.js에서는 req.body.term 으로 받을 수 있다.

response object는 user에게 suggest할 data object이다. 이 data object는 request object에서 post로 보낸 provied term에 의해 filter된다. 


그럼 ajax를 이용한 예제를 보겠다 .


$('#country_name').autocomplete({
		      	source: function( request, response ) {
		      		$.ajax({
		      			url : 'ajax.php',
		      			dataType: "json",
						data: {
						   name_startsWith: request.term,
						   type: 'country'
						},
						 success: function( data ) {
							 response( $.map( data, function( item ) {
								return {
									label: item,
									value: item
								}
							}));
						}
		      		});
		      	},
		      	autoFocus: true,
		      	minLength: 0      	
		      });

위와 같이 보낼 때 data에는 key값을 사용자가 직접 정해서 server로 보내고 있다.

이때 그냥 request를 보내게 되면 term키를 이용하여 서버에서 input text를 받아볼 수 있다.

success 할 경우 data object를 server에서 받아 $.map을 이용하여 label과 value를 직접 mapping 해주고 있다.


서버단 코드를 보겠다.


<?php
require_once 'config.php';

if($_GET['type'] == 'country'){
	$result = mysql_query("SELECT name FROM country where name LIKE '".strtoupper($_GET['name_startsWith'])."%'");	
	$data = array();
	while ($row = mysql_fetch_array($result)) {
		array_push($data, $row['name']);	
	}	
	echo json_encode($data);
}

?>

db 에서 LiKE를 이용하여 input keyword가 들어간 name을 추출하여 array로 만든뒤에 json으로 클라이언트에 보내고 있다..


필자는 서버단 코드를 database에 직접 접근 하지 않고 초기에 db를 한번만 접근하여 받아온 데이터를 redis store에 저장한 뒤 이에 접근 하는 방식으로 구현해보려고 하고있다. 

'프로그램 > js' 카테고리의 다른 글

ajax와 인코딩문제  (0) 2015.03.27
javascript object 개념.  (0) 2015.03.27
jquery map  (0) 2015.03.27
slice()를 이용한 array copy  (0) 2015.03.27
jquery autocomplete  (0) 2015.02.22
블로그 이미지

종환 Revolutionist-JongHwan

github.com/alciakng 항상 겸손하자.

댓글을 달아 주세요