ajax live search
version - Version 3.1
*** 이 프로젝트는 더 이상 유지되지 않습니다 *** 이 프로젝트는 몇 년 전에 시작했는데 지금까지 많은 것이 바뀌었습니다. 또한 서로 다른 레이어와 기존 기술(jQuery!) 간의 결합으로 인해 확장 가능한 프로젝트가 아닙니다. 모든 지원에 감사드립니다. 하지만 안타깝게도 이 프로젝트를 보관해야 합니다. :(
AJAX Live Search는 Google 자동 완성 기능과 유사하게 입력할 때 결과를 검색하고 표시하는 jQuery 플러그인/PHP 검색 양식입니다.
실제로 확인해 보세요.
| IE 8+ ✔ | 크롬 ✔ | 파이어폭스 ✔ | 오페라 ✔ | 사파리 ✔ |
이 프로젝트를 지원해 주신 BrowserStack 및 JetBrains에게 감사드립니다.
더미 데이터베이스 및 테이블 생성을 포함하여 index.php 의 현재 예제를 작동하려면 7분 이상 걸리지 않아야 합니다. 하지만 기존 프로젝트에 통합해야 하는 경우에는 더 많은 시간이 소요됩니다. 이를 달성하려면 다음 텍스트 필드가 있다고 가정합니다.
<input type="text" class='mySearch' id="ls_query" placeholder="Type to start searching ...">
core , css , font , img , js 및 templates 포함한 폴더를 프로젝트에 복사하세요.
core/Config.template.php 에서 필요한 구성, 특히 데이터베이스 구성을 지정하고 파일 이름을 Config.php 로 바꿉니다. 이 파일에는 PHP 구성 표에 설명된 플러그인의 모든 백엔드 설정이 포함되어 있습니다.
페이지에 js/ajaxlivesearch.min.js 또는 js/ajaxlivesearch.js 및 css/ajaxlivesearch.min.css 또는 css/ajaxlivesearch.css 포함합니다.
core/AjaxProcessor.php 의 Access-Control-Allow-Origin header URL을 프로젝트 URL로 변경합니다. 현재는 https://ajaxlivesearch.com 입니다.
core/Handler.php 및 core/Config.php (PHP) 페이지에 포함되어 있고 파일 맨 위에 다음 줄이 있는지 확인하세요( index.php 확인).
use AjaxLiveSearchcoreConfig;
use AjaxLiveSearchcoreHandler;
if (session_id() == '') {
session_start();
}
$handler = new Handler();
$handler->getJavascriptAntiBot();
마지막으로 플러그인을 텍스트 필드에 연결하고 필수 옵션(loaded_at 및 토큰)을 전달합니다.
jQuery("#ls_query").ajaxlivesearch({loaded_at: , token: getToken() . "'"; ?>, max_input: , }); ````
필요한 경우 추가 매개변수를 서버에 게시할 수도 있습니다. 이를 달성하려면 검색 입력에 data 속성을 추가해야 합니다.
<input type="text" class='mySearch' id="ls_query" placeholder="Type to start searching ..." data-additionalData="hello world!">
예를 들어, 이 경우 다음과 같이 PHP의 데이터 속성에 액세스할 수 있습니다.
// key is transformed to lowercase
$additionalData = $_POST['additionaldata'];
| 이름 | 유형 | 필수의 | 설명 |
|---|---|---|---|
| 로드_at | 정수 | 예 | 이는 봇이 검색하는 것을 방지하는 데 사용됩니다. |
| 토큰 | 끈 | 예 | CSRF 공격을 방지하기 위해 사용됩니다. |
| URL | 끈 | 아니요 | 기본값: ajax/process_livesearch.php. |
| 은닉처 | 부울 | 아니요 | 이는 Ajax 요청 캐싱을 나타냅니다. 기본값: 거짓 |
| form_anti_bot | 끈 | 아니요 | 기본값: ajaxlivesearch_guard |
| 슬라이드_속도 | 끈 | 아니요 | 기본값: 빠름 |
| 유형_지연 | 정수 | 아니요 | 기본값: 350 |
| 최대_입력 | 정수 | 아니요 | 기본값: 20 |
| min_chars_to_search | 정수 | 아니요 | 검색을 시작하기 위한 최소 문자 길이입니다. 기본값: 0 |
| 페이지_범위 | 정렬 | 아니요 | 기본값: [0, 5, 10] |
| 페이지_범위_기본값 | 정수 | 아니요 | 기본값: 5 |
| form_anti_bot_class | 끈 | 아니요 | 기본값: ls_anti_bot |
| 바닥글_클래스 | 끈 | 아니요 | 기본값: ls_result_footer |
| 다음_페이지_클래스 | 끈 | 아니요 | 기본값: ls_next_page |
| 이전_페이지_클래스 | 끈 | 아니요 | 기본값: ls_previous_page |
| 페이지 제한 | 끈 | 아니요 | 기본값: page_limit |
| 결과_래퍼_클래스 | 끈 | 아니요 | 기본값: ls_result_div |
| 결과_클래스 | 끈 | 아니요 | 기본값: ls_result_main |
| 컨테이너_클래스 | 끈 | 아니요 | 기본값: ls_container |
| 페이지 매김_클래스 | 끈 | 아니요 | 기본값: 페이지 매김 |
| form_class | 끈 | 아니요 | 기본값: 검색 |
| 로드_at_클래스 | 끈 | 아니요 | 기본값: ls_page_loaded_at |
| 토큰_클래스 | 끈 | 아니요 | 기본값: ls_token |
| current_page_hidden_class | 끈 | 아니요 | 기본값: ls_current_page |
| current_page_lbl_class | 끈 | 아니요 | 기본값: ls_current_page_lbl |
| last_page_lbl_class | 끈 | 아니요 | 기본값: ls_last_page_lbl |
| total_page_lbl_class | 끈 | 아니요 | 기본값: ls_last_page_lbl |
| 페이지_범위_클래스 | 끈 | 아니요 | 기본값: ls_items_per_page |
| 네비게이션_클래스 | 끈 | 아니요 | 기본값: 탐색 |
| 화살표_클래스 | 끈 | 아니요 | 기본값: 화살표 |
| 이름 |
|---|
| onResultClick |
| onResultEnter |
| onAjaxComplete |
예:
jQuery(".mySearch").ajaxlivesearch({
loaded_at: <?php echo time(); ?>,
token: <?php echo "'" . $handler->getToken() . "'"; ?>,
max_input: <?php echo Config::getConfig('maxInputLength'); ?>,
onResultClick: function(e, data) {
// get the index 1 (second column) value
var selectedOne = jQuery(data.selected).find('td').eq('1').text();
// set the input value
jQuery('#ls_query').val(selectedOne);
// hide the result
jQuery("#ls_query").trigger('ajaxlivesearch:hide_result');
},
onResultEnter: function(e, data) {
// do whatever you want
// jQuery("#ls_query").trigger('ajaxlivesearch:search', {query: 'test'});
},
onAjaxComplete: function(e, data) {
}
});
| 이름 |
|---|
| ajaxlivesearch:hide_result |
| ajaxlivesearch:검색 |
| 이름 | 유형 | 필수의 | 설명 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 데이터 소스 | 정렬 | 예 | 각 검색 텍스트 필드의 데이터 소스입니다. 키는 HTML ID 필드를 참조합니다. 현재 MySQL과 mongoDB(베타 버전)가 지원됩니다. MySQL 데이터 소스 구성:
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 안티봇 | 끈 | 예 | 이는 JavaScript를 사용하지 않는 봇의 양식 제출을 방지하기 위한 보안 기술로 사용됩니다. 이 기술에서는 jQuery를 사용하여 이 값으로 숨겨진 필드를 채웁니다. 어떤 값이든 가질 수 있지만 jQuery 플러그인에 전달된 `form_anti_bot` 옵션과 동일해야 합니다. 기본적으로 `ajaxlivesearch_guard`로 설정되어 있습니다. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 검색시작시간오프셋 | 정수 | 예 | 이는 봇에 대한 또 다른 보안 기술에 사용됩니다. 일부 봇은 페이지 로드가 완료되면 즉시 양식을 제출합니다. 그러나 인간의 경우 필드를 채우는 데 더 많은 시간이 걸립니다. 기본적으로 이 매개변수는 3초로 설정됩니다. 3초 이상 할당하는 것은 권장되지 않습니다. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 최대 입력 길이 | 정수 | 예 | 검색 필드의 최대 문자 길이를 지정합니다. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 주형 | 끈 | 예 | 템플릿 폴더에 있는 템플릿 이름을 지정합니다. |
anti_bot 및 토큰을 비활성화하면 어떤 위험이 있습니까?
form_anti_bot 있으면 좋은 보안 기능이지만 제거해도 괜찮습니다. 이를 달성하려면 core/AjaxProcessor.php 에서 validateRequest() 변경하고 $_POST['ls_anti_bot'] 제거하고 core/Handler.php 에서 verifySessionValue($sessionParameter, $sessionValue) 변경해야 합니다. 반면에 token 제거하면 누구나 양식을 만들고 서버를 데이터 소스로 사용할 수 있으므로 권장되지 않습니다. 현재 페이지/검색 양식이 로드될 때마다 양식 페이지(현재 예에서는 index.php )에서 getToken() 호출하여 새 토큰이 생성됩니다. 그런 다음 서버에 새 요청을 검색/전송할 때 verifySessionValue($sessionParameter, $sessionValue) 사용하여 토큰과 anti_bot을 확인합니다. 이것이 과도하다고 생각되면 getToken() 에서 기존 세션에 대해 동일한 토큰을 반환하십시오.
결과에서 열을 어떻게 숨길 수 있나요?
이는 템플릿에서 달성할 수 있습니다. 예제는 templates/hiddenColumn.php 에서 찾을 수 있습니다.
MIT 라이센스
