使用 ajax 完成，搜尋框內容自動提示

思想： 使用者時，獲取輸入的內容，作為引數，發起請求，獲取到 服務端資料，通過 前端模板引擎 渲染到 頁面上 。

檔案目錄：

serve

public
jsajax.js
view
搜尋框內容自動提示.html
data.json

頁面結構，引入 ajax 和 模板引擎：

>

class
="container"
>
class
="form-group"
>
type
="text"
class
="form-control"
placeholder
="請輸入搜尋關鍵字"
id="search"
>
class
="list-group"
id="list-box"
>
ul>
div>
div>
src=
"/js/ajax.js"
>
script
>
src=
"/js/template-web.js"
>
script
>
body
>

data.js 資料

"keys":[

"火影忍者"
,"火影最新劇場版"
,"火影高畫質桌布"
,"你最愛火影中的誰？"
,"火影忍者-七月動物大暴動"
]

// 輸入框驗證

get(
'/searchautoprompt'
,(req, res)
=>
) res.
status
(200).
send
(result);}
)

// 獲取元素

let search = document.
queryselector
('#search');
let listbox = document.
queryselector
('#list-box');
search.
addeventlistener
('input',(
)=>
, success:
(data)
=>
, error:
(data)
=>})
})

於是，我們呢 ，可以 建立乙個 定時器，規定在 幾秒 後，沒有輸入 敲擊鍵盤 ，就傳送請求；

我們在 敲擊時，先 清除上乙個 定時器，使用上一次 敲擊鍵盤 就不會發起請求了；

let item =

null
;search.
addeventlistener
('input',(
)=>
// 開啟定時器
item =
settimeout((
)=>
, success:
(data)
=>
, error:
(data)
=>})
},1000);
})

整個**：

lang

="en"
>
>
charset
="utf-8"
>
>
搜尋框輸入文字自動提示title
>
rel=
"stylesheet"
href
="/assets/bootstrap/dist/css/bootstrap.min.css"
>
type
="text/css"
>
.container
.list-group
style
>
head
>
>
class
="container"
>
class
="form-group"
>
type
="text"
class
="form-control"
placeholder
="請輸入搜尋關鍵字"
id="search"
>
class
="list-group"
id="list-box"
>
ul>
div>
div>
src=
"/js/ajax.js"
>
script
>
src=
"/js/template-web.js"
>
script
>
"tp1"
type
="text/html"
>
}="list-group-item"
>
}<
/li>
}script
>
>
// 獲取元素
let search = document.
queryselector
('#search');
let listbox = document.
queryselector
('#list-box');
let item =
null
; search.
addeventlistener
('input',(
)=>
// 開啟定時器
item =
settimeout((
)=>
, success:
(data)
=>);
// 渲染模板到頁面上
listbox.style.display =
'block'
; listbox.innerhtml = html;},
error:
(data)
=>})
},1000);
})script
>
body
>
html
>

jquery EasyUI 的下拉框內容自動過濾

環境 jquery easyui 1.4.1 關於內容自動過濾的下拉框涉及2種 combobox 又combo擴充套件而來 combogrid 又combo和datagrid擴充套件而來 內容過濾的屬性是mode,其值為local或remote，預設為local mode功能定義 當文字改變時如何讀...

Ajax自動完成功能

近日學習了一下ajax，照做了幾個例子，感覺比較新奇。第乙個就是自動完成的功能即autocomplete,具體的例子可以在這裡看 http www.b2c battery.co.uk 在search框內輸入乙個產品型號，就可以看見效果了。這裡用到了乙個開源的 autoassist 有興趣的可以看一下...

使用AJAX1 0實現自動完成功能

使用ajax1.0實現自動完成功能 下午 04 56 2011 2 14 3 加入標記。scriptservice 4 編寫方法。給方法新增標記 webmethod 方法修飾為public。webservice namespace webservicebinding conformsto wsipr...