ajax live search
version - Version 3.1
*** Dies wird nicht mehr gepflegt *** Ich habe dieses Projekt vor ein paar Jahren gestartet, aber es hat sich bisher viel verändert. Aufgrund der Kopplung zwischen verschiedenen Schichten und alten Technologien (jQuery!) handelt es sich außerdem nicht um ein skalierbares Projekt. Vielen Dank für die Unterstützung, aber leider muss ich dieses Projekt archivieren :(
AJAX Live Search ist ein jQuery-Plugin/PHP-Suchformular, das das Ergebnis während der Eingabe sucht und anzeigt, ähnlich wie die Autovervollständigungsfunktion von Google.
Schauen Sie es sich in Aktion an.
| IE 8+ ✔ | Chrom ✔ | Firefox ✔ | Oper ✔ | Safari ✔ |
Vielen Dank an BrowserStack und JetBrains für die Unterstützung dieses Projekts.
Es sollte nicht länger als 7 Minuten dauern, das aktuelle Beispiel in index.php zum Laufen zu bringen, einschließlich der Erstellung einer Dummy-Datenbank und einer Tabelle. Für den Fall, dass Sie es in ein bestehendes Projekt integrieren müssen, wird es jedoch mehr dauern. Um dies zu erreichen, gehen Sie davon aus, dass Sie über dieses Textfeld verfügen:
<input type="text" class='mySearch' id="ls_query" placeholder="Type to start searching ...">
Kopieren Sie die Ordner einschließlich core , css , font , img , js und templates in Ihr Projekt.
Geben Sie die erforderlichen Konfigurationen, insbesondere Datenbankkonfigurationen, in core/Config.template.php an und benennen Sie die Datei in Config.php um. Diese Datei enthält alle Back-End-Einstellungen für das Plugin, die in der PHP-Konfigurationstabelle erläutert wurden.
Fügen Sie js/ajaxlivesearch.min.js oder js/ajaxlivesearch.js und css/ajaxlivesearch.min.css oder css/ajaxlivesearch.css in Ihre Seite ein.
Ändern Sie die URL für Access-Control-Allow-Origin header in core/AjaxProcessor.php in Ihre Projekt-URL. Derzeit ist es https://ajaxlivesearch.com .
Stellen Sie sicher, dass core/Handler.php und core/Config.php in Ihrer (PHP-)Seite enthalten sind und diese Zeilen ganz oben in der Datei stehen (überprüfen Sie index.php ):
use AjaxLiveSearchcoreConfig;
use AjaxLiveSearchcoreHandler;
if (session_id() == '') {
session_start();
}
$handler = new Handler();
$handler->getJavascriptAntiBot();
Zum Schluss verknüpfen Sie das Plugin mit dem Textfeld und übergeben die erforderlichen Optionen (loaded_at & token):
jQuery("#ls_query").ajaxlivesearch({ geladen_at: , token: getToken() . "'"; ?>, max_input: , }); „
Sie können bei Bedarf auch zusätzliche Parameter an den Server senden. Um dies zu erreichen, sollten Sie der Sucheingabe data hinzufügen:
<input type="text" class='mySearch' id="ls_query" placeholder="Type to start searching ..." data-additionalData="hello world!">
In diesem Fall können Sie beispielsweise wie folgt auf das Datenattribut in PHP zugreifen:
// key is transformed to lowercase
$additionalData = $_POST['additionaldata'];
| Name | Typ | Erforderlich | Beschreibung |
|---|---|---|---|
| geladen_at | Ganze Zahl | Ja | Dies wird verwendet, um die Suche durch Bots zu verhindern. |
| Token | Zeichenfolge | Ja | Dies wird verwendet, um CSRF-Angriffe zu verhindern. |
| URL | Zeichenfolge | NEIN | Standard: ajax/process_livesearch.php. |
| Cache | Boolescher Wert | NEIN | Dies bezieht sich auf das Caching von Ajax-Anfragen. Standard: false |
| form_anti_bot | Zeichenfolge | NEIN | Standard: ajaxlivesearch_guard |
| slide_speed | Zeichenfolge | NEIN | Standard: schnell |
| type_delay | Ganze Zahl | NEIN | Standard: 350 |
| max_input | Ganze Zahl | NEIN | Standard: 20 |
| min_chars_to_search | Ganze Zahl | NEIN | Mindestzeichenlänge zum Starten der Suche. Standard: 0 |
| page_ranges | Array | NEIN | Standard: [0, 5, 10] |
| page_range_default | Ganze Zahl | NEIN | Standard: 5 |
| form_anti_bot_class | Zeichenfolge | NEIN | Standard: ls_anti_bot |
| footer_class | Zeichenfolge | NEIN | Standard: ls_result_footer |
| next_page_class | Zeichenfolge | NEIN | Standard: ls_next_page |
| previous_page_class | Zeichenfolge | NEIN | Standard: ls_ previous_page |
| page_limit | Zeichenfolge | NEIN | Standard: page_limit |
| result_wrapper_class | Zeichenfolge | NEIN | Standard: ls_result_div |
| result_class | Zeichenfolge | NEIN | Standard: ls_result_main |
| Containerklasse | Zeichenfolge | NEIN | Standard: ls_container |
| pagination_class | Zeichenfolge | NEIN | Standard: Paginierung |
| form_class | Zeichenfolge | NEIN | Standard: Suche |
| geladene_at_klasse | Zeichenfolge | NEIN | Standard: ls_page_loaded_at |
| token_class | Zeichenfolge | NEIN | Standard: ls_token |
| aktuelle_seite_versteckte_klasse | Zeichenfolge | NEIN | Standard: ls_current_page |
| current_page_lbl_class | Zeichenfolge | NEIN | Standard: ls_current_page_lbl |
| last_page_lbl_class | Zeichenfolge | NEIN | Standard: ls_last_page_lbl |
| total_page_lbl_class | Zeichenfolge | NEIN | Standard: ls_last_page_lbl |
| page_range_class | Zeichenfolge | NEIN | Standard: ls_items_per_page |
| navigationsklasse | Zeichenfolge | NEIN | Standard: Navigation |
| Pfeilklasse | Zeichenfolge | NEIN | Standard: Pfeil |
| Name |
|---|
| onResultClick |
| onResultEnter |
| onAjaxComplete |
Beispiel:
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) {
}
});
| Name |
|---|
| ajaxlivesearch:hide_result |
| ajaxlivesearch:search |
| Name | Typ | Erforderlich | Beschreibung | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Datenquellen | Array | Ja | Datenquelle für jedes Suchtextfeld. Schlüssel beziehen sich auf das Feld HTML-ID. Derzeit werden MySQL und mongoDB (dies ist in der Betaphase) unterstützt. MySQL-Datenquellenkonfigurationen:
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| antiBot | Zeichenfolge | Ja | Dies wird als Sicherheitstechnik verwendet, um Formularübermittlungen durch Bots zu verhindern, die kein JavaScript verwenden. Bei dieser Technik wird ein ausgeblendetes Feld mithilfe von jQuery mit diesem Wert gefüllt. Der Wert kann beliebig sein, MUSS jedoch mit der Option „form_anti_bot“ identisch sein, die an das jQuery-Plugin übergeben wird. Standardmäßig ist es auf „ajaxlivesearch_guard“ eingestellt. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| searchStartTimeOffset | Ganze Zahl | Ja | Dies wird für eine weitere Sicherheitstechnik gegen Bots verwendet. Einige Bots senden sofort ein Formular, sobald die Seite vollständig geladen ist. Für den Menschen dauert es jedoch länger, ein Feld zu füllen. Standardmäßig ist dieser Parameter auf 3 Sekunden eingestellt. Es wird nicht empfohlen, mehr als 3 Sekunden zuzuweisen. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| maxInputLength | Ganze Zahl | Ja | Dies gibt die maximale Länge der Zeichen im Suchfeld an. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Vorlage | Zeichenfolge | Ja | Dies gibt den Namen der Vorlage an, die sich im Vorlagenordner befindet |
Welches Risiko besteht bei der Deaktivierung von anti_bot und token?
form_anti_bot ist eine nette Sicherheitsfunktion, aber es sollte in Ordnung sein, sie zu entfernen. Um dies zu erreichen, müssen Sie validateRequest() in core/AjaxProcessor.php ändern und $_POST['ls_anti_bot'] entfernen sowie verifySessionValue($sessionParameter, $sessionValue) in core/Handler.php ändern. Im Gegensatz dazu ermöglicht das Entfernen des token jedem, ein Formular zu erstellen und Ihren Server als Datenquelle zu verwenden. Daher wird dies nicht empfohlen. Derzeit wird jedes Mal, wenn die Seite/das Suchformular geladen wird, ein neues Token generiert, indem getToken() auf der Formularseite aufgerufen wird ( index.php im aktuellen Beispiel). Anschließend werden das Token und der Anti_Bot mithilfe von verifySessionValue($sessionParameter, $sessionValue) bei der Suche/Senden einer neuen Anfrage an den Server überprüft. Wenn Ihnen das zu viel erscheint, geben Sie in getToken() das gleiche Token für die bestehende Sitzung zurück.
Wie kann eine Spalte im Ergebnis ausgeblendet werden?
Dies kann in Ihrer Vorlage erreicht werden. Ein Beispiel finden Sie in templates/hiddenColumn.php
MIT-Lizenz
