ajax live search下載 - ajax live search原始碼下載

ajax live search

其他源碼

version - Version 3.1

下載

AJAX 即時搜尋

*** 這不再維護了*** 我幾年前開始了這個項目，但到目前為止已經發生了很多變化。此外，由於不同層之間的耦合以及舊技術（jQuery！），這不是一個可擴展的項目。非常感謝所有的支持，但不幸的是我必須存檔這個項目:(

AJAX Live Search 是一個 jQuery 外掛程式/PHP 搜尋表單，可在您鍵入時搜尋並顯示結果，類似於 Google 自動完成功能。

示範

在行動中檢查一下。

瀏覽器支援


IE 8+ ✔	鉻 ✔	火狐瀏覽器✔	歌劇✔	野生動物園 ✔

感謝 BrowserStack 和 JetBrains 對這個專案的支持。

Ajax 即時搜尋入門

讓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 和 token）：

jQuery("#ls_query").ajaxlivesearch({ returned_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'];

jQuery 選項

姓名	類型	必需的	描述
載入時間	整數	是的	這用於防止機器人搜索。
代幣	細繩	是的	這用於防止 CSRF 攻擊。
網址	細繩	不	預設值：ajax/process_livesearch.php。
快取	布林值	不	這裡指的是Ajax請求快取。預設值：假
表單反機器人	細繩	不	預設值：ajaxlivesearch_guard
滑動速度	細繩	不	預設值：快速
類型延遲	整數	不	預設值：350
最大輸入	整數	不	預設值：20
搜尋的最小字元數	整數	不	開始搜尋的最小字元長度。預設值：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
分頁類	細繩	不	預設：分頁
表單類	細繩	不	預設：搜尋
類別載入	細繩	不	預設值：ls_page_loaded_at
令牌類	細繩	不	預設值：ls_token
目前頁面隱藏類別	細繩	不	預設值：ls_current_page
目前頁面lbl類	細繩	不	預設值：ls_current_page_lbl
最後一頁lbl類	細繩	不	預設值：ls_last_page_lbl
總頁lbl類	細繩	不	預設值：ls_last_page_lbl
頁面範圍類	細繩	不	預設值：ls_items_per_page
導航類	細繩	不	預設：導航
箭頭類	細繩	不	預設：箭頭

自訂事件

姓名
點擊結果
結果輸入時
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：隱藏結果
ajaxlivesearch:搜尋

PHP 配置

姓名

類型

必需的

描述

資料來源

大批

是的

每個搜尋文字欄位的資料來源。鍵指的是 HTML id 欄位。目前支援 MySQL 和 mongoDB（這是測試版）。

MySQL資料來源設定：

姓名	類型	必需的	描述
主持人	細繩	是的	MySQL 資料庫主機。它通常是“本地主機”。
資料庫	細繩	是的	MySQL 資料庫名稱。
使用者名稱	細繩	是的	MySQL 資料庫使用者名稱。
經過	細繩	是的	MySQL資料庫使用者名稱密碼。
桌子	細繩	是的	即時搜尋在其中搜尋的 MySQL 資料庫表。
搜尋欄	大批	是的	即時搜尋在其中搜尋的搜尋列。例如數組（'列名_1'，'列名_2'）
排序依據	細繩	不	結果基於其排序的列。
訂單方向	細繩	不	訂單方向：「orderBy」的「ASC」或「DESC」。預設值：ASC
過濾結果	大批	不	結果中需要包含的欄位。如果為空，將傳回所有列。
比較運算符	細繩	是的	搜尋查詢比較運算符。比較運算子的可能值為：「LIKE」和「=」。
搜尋模式	細繩	是的	這用於指定如何搜尋查詢。可能的值為：`q`、`q`、`q`、`q`。
區分大小寫	細繩	是的	搜尋查詢區分大小寫
最大結果	整數	不	這用於限制結果的最大數量。
顯示標題	大批	不	這用於顯示或隱藏結果中的標題。如果「active」設定為 true，則顯示標題。此外，還可以將列對應到不同的標題。
類型	細繩	是的	資料來源的類型。目前可能的值為：「mysql」或「mongo」。

反機器人

細繩

是的

這是一種安全技術，可防止那些不使用 JavaScript 的機器人提交表單。在此技術中，使用 jQuery 使用該值填入隱藏欄位。它可以有任何值，但必須與傳遞給 jQuery 插件的「form_anti_bot」選項相同。預設情況下，它設定為“ajaxlivesearch_guard”。

搜尋開始時間偏移

整數

是的

這用於另一種針對機器人的安全技術。頁面載入完成後，有些機器人會立即提交表單。然而，對於人類來說，填補一個領域需要更多的時間。預設情況下，此參數設定為 3 秒。不建議分配超過 3 秒。

最大輸入長度

整數

是的

這指定搜尋字段中的最大字元長度。

範本

細繩

是的

這指定位於模板資料夾中的模板名稱

常問問題

禁用 anti_bot 和 token 有什麼風險？
form_anti_bot是一個很好的安全功能，但刪除它應該沒問題。要實現此目的，您需要更改core/AjaxProcessor.php中的validateRequest()並刪除$_POST['ls_anti_bot']以及更改core/Handler.php中的verifySessionValue($sessionParameter, $sessionValue) 。相反，刪除token允許任何人建立表單並使用您的伺服器作為資料來源，因此不建議這樣做。目前，每次載入頁面/搜尋表單時，都會透過呼叫表單頁面中的getToken()產生一個新令牌（目前範例中為index.php ）。然後在搜尋/向伺服器發送新請求時使用verifySessionValue($sessionParameter, $sessionValue)檢查令牌和 anti_bot。如果這對您來說有點大材小用，請在getToken()中為現有會話傳回相同的令牌。
如何在結果中隱藏一列？
這可以在您的模板中實現。可以在templates/hiddenColumn.php中找到範例