PHP 및 Ajax를 사용한 자동 완성
이전 튜토리얼에서 uploading an image using AJAX and Javascript 에 대해 배웠습니다. 따라서 이 튜토리얼에서는 PHP와 Ajax를 사용한 자동 완성을 볼 것입니다.
자동 완성은 웹 개발에서 중요한 역할을 하며 ajax의 도움으로 사용자가 우수한 경험을 얻을 수 있습니다. 그럼 먼저 자동완성이 무엇인지 알아볼까요?
사용자가 텍스트 필드에서 검색할 특정 문자를 입력하고 시스템이 페이지를 새로 고치지 않고 일치하는 내용 목록을 제공하면 해당 프로세스를 자동 완성이라고 합니다.
PHP 및 Ajax를 사용하여 자동 완성을 위해 따라야 할 단계(이 튜토리얼에서)
HTML 양식 만들기
<!DOCTYPE html>
<html>
<body>
<h2>Demo Example</h2>
<form action="" method="POST">
<label for="name">Astronauts:</label><br>
<input type="text" id="astronauts" name="astronauts">
<div id="astronauts-list"></div>
<input type="submit" value="Submit">
</form>
</body>
</html>
데모에는 하나의 양식 필드만 사용했습니다. 실제 예에서는 더 많은 필드가 있을 수 있습니다. 여기에서 우리는 우주비행사를 위한 하나의 텍스트 필드를 정의했으며 묶기 시작하면 우주비행사의 이름을 제안할 것입니다.
Ajax용 JQuery를 사용하여 일치하는 이름 목록 가져오기
<script type="text/javascript">
$(document).ready(function() {
$("#astronauts").keyup(delay(function(e) {
$.ajax({
method: "POST",
url: "response.php",
dataType: "json",
data: {
astronaut_name: $(this).val()
}
}).done(function(response) {
$("#astronauts-list").show();
var lists = '';
$.each(response, function(key, val) {
lists += "<li onclick='highlightSelectedAstronauts(\"" + val + "\")'>" + val + "</li>";
});
$("#astronauts-list").html(lists);
});
}, 700));
});
function highlightSelectedAstronauts(val) {
$("#astronauts").val(val);
$("#astronauts-list").hide();
}
function delay(callback, ms) {
var timer = 0;
return function() {
var context = this,
args = arguments;
clearTimeout(timer);
timer = setTimeout(function() {
callback.apply(context, args);
}, ms || 0);
};
}
</script>
다음은 완전한 자바스크립트 코드입니다. 블록별로 이해합시다.
따라서 문서가 로드될 때 "우주 비행사"필드에 대한 키업 이벤트를 초기화합니다. 이는 사용자가 입력할 때마다 이 keyup 이벤트가 트리거되고 ajax 작업을 수행함을 의미합니다.
ajax 호출에서 PHP로부터 응답을 받으면 일치하는 모든 우주 비행사를 목록 형식으로 "li"로 표시하고 이름을 클릭하면 텍스트 필드에서 우주 비행사가 선택됩니다.
여기서도 사용자가 이름을 매우 빠르게 입력하고 ajax가 서버에 여러 번 요청하여 실제 결과를 가져오는 데 시간이 걸리기 때문에 서버에 대한 요청(지연 기능 사용)을 몇 밀리초 지연시켰습니다.
일치하는 목록이 크면 결국 짧은 목록보다 시간이 더 오래 걸립니다. 따라서 솔루션은 서버에 대한 요청을 몇 밀리초 단위로 지연시켜 서버의 부담을 낮출 뿐만 아니라 매우 빠르게 응답하는 것입니다..
cURL을 사용하여 일치하는 이름 목록 가져오기
<?php
$astronaut_name = strtolower($_POST['astronaut_name']);
$cURLConnection = curl_init('http://api.open-notify.org/astros.json');
curl_setopt($cURLConnection, CURLOPT_RETURNTRANSFER, true);
$apiResponse = curl_exec($cURLConnection);
curl_close($cURLConnection);
$list = [];
$list_astros = json_decode($apiResponse, true);
if ($list_astros['message'] == 'success') {
foreach ($list_astros['people'] as $key => $astronaut) {
preg_match("/" . $astronaut_name . "/", strtolower($astronaut['name']), $output_array);
if (!empty($output_array)) {
array_push($list, $astronaut['name']);
}
}
}
echo json_encode($list);
위의 코드에서 우리는 cURL을 사용하여 우주비행사 목록을 가져왔습니다. 데이터베이스에서 목록을 가져올 수도 있습니다. 그러나 데모에서는 더 짧은 코드를 위해 cURL을 유지할 수 있다고 생각합니다.
cURL 요청에서 현재 ISS(국제 우주 정거장)에 있는 현재 우주 비행사를 가져옵니다. 해당 목록을 얻으면 현재 사용자가 요청한 것과 일치하는 목록만 수집하는 것으로 시작할 수 있습니다.
다음 코드에서는 cURL을 사용하여 가져온 각 우주 비행사를 반복하고 사용자가 요청한 모든 것이 각 우주 비행사와 하나씩 일치하고 일치하면 별도의 배열에 수집된 다음 json_encode() 함수를 사용합니다. 우리는 json 문자열을 ajax 호출로 반환할 것입니다.
결론:
더 큰 웹 사이트에서 사용자에게 최상의 경험을 제공하는 것은 좋은 접근 방식이지만 웹 사이트가 화려해야 한다는 의미는 아닙니다. 사용자는 특정 목록이 필요하고 계속 기다려야 할 때 짜증을 내지 않아야 합니다.
PHP와 ajax를 사용한 자동 완성은 사용자의 시간을 절약할 뿐만 아니라 사용성도 향상시킵니다.
Reference
이 문제에 관하여(PHP 및 Ajax를 사용한 자동 완성), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/programmingdive/autocomplete-using-php-and-ajax-5c27텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
