互動搜尋框提示

2021-10-11 03:09:31 字數 1532 閱讀 7557

1、獲取搜尋框並為其新增使用者輸入事件

2、獲取使用者輸入的關鍵字

3、向伺服器端傳送請求並攜帶關鍵字作為請求引數

4、將響應資料顯示在搜尋框底部

-->

"container"

>

"form-group"

>

"text" class=

"form-control" placeholder=

"請輸入搜尋關鍵字" id=

"search"

>

"list-group" id=

"list-box"

>

<

/ul>

<

/div>

<

/div>

"/js/ajax.js"

>

<

/script>

"/js/template-web.js"

>

<

/script>

"tpl" type=

"text/html"

>

<

!-- 迴圈 --

>

}"list-group-item"

>

}<

/li>

}<

/script>

// 獲取搜尋框

var searchinp = document.

getelementbyid

('search');

// 獲取提示文字存放容器

var listbox = document.

getelementbyid

('list-box');

// 儲存定時器的變數

var time = null;

// 當使用者在文字框中輸入的時候觸發

searchinp.oninput =

function()

// 開啟定時器讓請求延遲傳送

time =

settimeout

(function()

, header:

,// result伺服器端返回的資料

success:

function

(result));

// 將拼接好的字串顯示在頁面中

listbox.innerhtml = html;

// 顯示ul容器

listbox.style.display =

'block';}

, error:

function()

})},

800)};

<

/script>

<

/body>

// 輸入框文字提示

get(

'/searchautoprompt'

,(req, res)

=>

)

jquery實現搜尋框類似提示功

用jquery實現的類似google baidu搜尋框的提示功能.autopoint.js author 範永強 depends jquery.js function 類似google搜尋框提示功能 use input1,input2 autopoint 對所有需要自動提示功能的輸入框物件使用aut...

Ajax實現搜尋提示框 超級詳細

以下是對ajax搜尋提示框的整理,希望可以幫助到有需要的小夥伴 搜尋框 input 提示框 無序列表 加容器 div 做樣式 預設不顯示 class container type text id search class alter ul div div 使用者輸入事件 使用者在搜尋框中打字,鍵盤事...

怎樣去掉「互動式服務對話方塊檢測」提示對話方塊

背景 在win7以上的系統,當系統服務要彈出對話方塊的時候,會彈出 互動式服務對話方塊檢測 提示對話方塊。原因分析 真正的問題是windows 7 服務的session 0 隔離機制 在windows xp,windows server 2003或者更早期的windows作業系統中,所有的服務和應用...