該代碼使用HTML5數(shù)據(jù)級(jí)標(biāo)籤來(lái)設(shè)置文本字段的自動(dòng)完成選項(xiàng) 。它使用AJAC請(qǐng)求抓住JSON文件中的數(shù)據(jù)（如果需要或本地在JS對(duì)像上可以持續(xù)存儲(chǔ)在瀏覽器中的數(shù)據(jù)）。然後，它使用郊區(qū)的選擇來(lái)自動(dòng)填充郵政編碼的其他字段，並在郊區(qū)更改時(shí)聲明。除了Safari以外，幾乎所有瀏覽器中的工作都像零食一樣。 注意：HTML數(shù)據(jù)師仍然與所有瀏覽器不兼容。請(qǐng)參閱兼容性。對(duì)於回填插件，請(qǐng)使用此插件：jquery.relevantdropdowns.js - 它插入了一個(gè)帶有l(wèi)i的UL標(biāo)籤，以替換DataList選項(xiàng)的選項(xiàng)。

html5數(shù)據(jù)師標(biāo)籤

完整的jQuery

該代碼通過(guò)JSON和AUTO根據(jù)用戶的自動(dòng)完成選擇填充數(shù)據(jù)師。

<span>window.DATALIST = {
</span>
    <span>cache: {},
</span>
    <span>init: function()
</span>    <span>{
</span>        <span>var _this = this,
</span>            <span>this.cache.$form = $('formid');
</span>            <span>this.cache.$suburbs = this.cache.$form.find('datalist#suburbs');
</span>            <span>this.cache.$suburbInput = this.cache.$form.find('input[name="suburb"]');
</span>            <span>this.cache.$postcodeInput = this.cache.$form.find('input[name="postcode"]');
</span>            <span>this.cache.$stateInput = this.cache.$form.find('input[name="state"]');
</span>
        <span>//grab the datalist options from JSON data
</span>        <span>var checkMembershipRequest = $.ajax({
</span>            <span>type: "GET",
</span>            <span>dataType: "JSON",
</span>            <span>url: "/php/suburbs.php"
</span>        <span>});
</span>
        checkMembershipRequest<span>.done(function(data)
</span>        <span>{
</span>            <span>console.log(data);
</span>
            <span>//data could be cached in the browser if required for speed.
</span>            <span>// localStorage.postcodeData = JSON.stringify(data);
</span>
            <span>//add options to datalist
</span>            $<span>.each(data.suburbs, function(i<span>,v</span>)
</span>            <span>{
</span>                _this<span>.cache.$suburbs.append(''+i+'');
</span>            <span>});
</span>
            <span>//hook up data handler when suburb is changed to autocomplete postcode and state
</span>            _this<span>.cache.$suburbInput.on('change', function()
</span>            <span>{
</span>                <span>// console.log('suburb changed');
</span>                <span>var val = $(this).val(),
</span>                    selected <span>= _this.cache.$suburbs.find('option[data-value="'+val+'"]'),
</span>                    postcode <span>= selected.data('postcode'),
</span>                    state <span>= selected.data('state');
</span>                _this<span>.cache.$postcodeInput.val(postcode);
</span>                _this<span>.cache.$stateInput.val(state);
</span>            <span>});
</span>
        <span>});
</span>
        checkMembershipRequest<span>.fail(function(jqXHR<span>, textStatus</span>)
</span>        <span>{
</span>            <span>console.log( "postcode request fail - an error occurred: (" + textStatus + ")." );
</span>            <span>//try again...
</span>        <span>});
</span>
    <span>}
</span>
<span>}</span>

完整的html

這就是您的HTML的樣子：

*Suburb:





*Postcode:

State:

完整的JSON

PHP文件返回JSON - 可以是.json或.php，並在需要時(shí)從數(shù)據(jù)庫(kù)中獲取數(shù)據(jù)。

<span>{
</span>    <span>"suburbs": {
</span>        <span>"suburb1": {
</span>            <span>"postcode": "2016",
</span>            <span>"state": "NSW"
</span>        <span>},
</span>        <span>"suburb2": {
</span>            <span>"postcode": "4016",
</span>            <span>"state": "QLD"
</span>        <span>},
</span>        <span>"suburb3": {
</span>            <span>"postcode": "3016",
</span>            <span>"state": "CA"
</span>        <span>},
</span>        <span>"suburb4": {
</span>            <span>"postcode": "8016",
</span>            <span>"state": "WA"
</span>        <span>},
</span>        <span>"suburb5": {
</span>            <span>"postcode": "6016",
</span>            <span>"state": "SA"
</span>        <span>}
</span>    <span>}
</span><span>}</span>

html5觸發(fā)數(shù)據(jù)師

使用alt down箭頭模擬用戶操作。您需要使用jQuery來(lái)模擬多個(gè)觸發(fā)鍵盤(pán)。 key Code Alt = 18（也稱為AltKey的修飾符鍵） 鑰匙代碼向下箭頭= 40

<span>var e = jQuery.<span>Event</span>("keydown");
</span>e<span>.which = 40;
</span>e<span>.altKey = true;
</span><span>$("input").trigger(e);</span>

>關(guān)於jQuery Ajax和HTML5 Datalist AutoComplete

的常見(jiàn)問(wèn)題（常見(jiàn)問(wèn)題解答）

>如何在Firefox中使用AJAX動(dòng)態(tài)加載數(shù)據(jù)庫(kù)選項(xiàng)？

>

>在Firefox中使用Ajax動(dòng)態(tài)加載數(shù)據(jù)板選項(xiàng)，您需要使用jQuery ajax方法。首先，您需要為服務(wù)器端腳本創(chuàng)建AJAX請(qǐng)求。該腳本應(yīng)返回您要在數(shù)據(jù)庫(kù)中填充的數(shù)據(jù)。 AJAX請(qǐng)求成功後，您可以使用響應(yīng)數(shù)據(jù)來(lái)填充數(shù)據(jù)師。這是一個(gè)簡(jiǎn)單的示例：

$。 ajax（{{ success：function（data）{ var datalist = $（' ＃your-datalist-id'）;
datalist. empty（）;
$。each（數(shù)據(jù)，函數(shù)（index，value） datalist.append（''）;
}）;
}
}）;

在此代碼中，替換'server-side-side-script “使用您的服務(wù)器端腳本的URL和“您的數(shù)據(jù)庫(kù)ID”，並帶有數(shù)據(jù)級(jí)的ID。

>如何將jQuery Autocomplete與回調(diào)AJAX JSON？您需要在輸入字段上初始化自動(dòng)完成的小部件並提供源選項(xiàng)。源選項(xiàng)應(yīng)是發(fā)出AJAX請(qǐng)求並使用響應(yīng)數(shù)據(jù)填充自動(dòng)完成建議的函數(shù)。這是一個(gè)示例：

$（'＃your-input-id'）。 autoComplete（{{
source：function（request，wendesp）{ $ .ajax（{url： 'your-side-side-script'，
> datatype：'json'，
data：{
術(shù)語(yǔ)：request.term
}，>成功：函數(shù)（data）{
響應(yīng)（data）;
}
}）; }
}）;

在此代碼中，替換'your-Input-id'使用您的輸入字段的ID和“您的服務(wù)器端”標(biāo)記，並帶有服務(wù)器端腳本的URL。對(duì)於自動(dòng)完成功能？

>您可以使用jQuery Ajax和HTML5 Datalist來(lái)創(chuàng)建自動(dòng)完成功能。首先，您需要在HTML中創(chuàng)建一個(gè)輸入字段和數(shù)據(jù)師。然後，您需要使用jQuery Ajax來(lái)獲取要用於自動(dòng)完成建議的數(shù)據(jù)。 AJAX請(qǐng)求成功後，您可以使用響應(yīng)數(shù)據(jù)來(lái)填充數(shù)據(jù)師。以下是一個(gè)示例：

$。 -Server-side-script'，

成功：function（data）{ var datalist = $（'＃your-datalist-id'） datalist.empty（）;

$。 each（data，function（index，value）{
datalist.append（''>'）;
}）; }
}）;
在此代碼中，將'your-datalist-id'替換為datalist的ID和'your-server-side-script'用您的url替換服務(wù)器端腳本。

>如何處理jQuery ajax請(qǐng)求中的錯(cuò)誤？



jquery ajax提供了幾種處理錯(cuò)誤的方法。最常見(jiàn)的方法是“錯(cuò)誤”回調(diào)選項(xiàng)。此選項(xiàng)是當(dāng)Ajax請(qǐng)求失敗時(shí)稱為函數(shù)。該函數(shù)接收三個(gè)參數(shù)：JQXHR對(duì)象，描述錯(cuò)誤類(lèi)型的字符串以及如果發(fā)生的話，則是可選的異常對(duì)象。以下是一個(gè)示例：

$。ajax（{{
url：'your-server-side-script'，
成功：function （data）{ //處理成功響應(yīng)

}，

錯(cuò)誤：function（jqxhr，textStatus，error thrath）{

> console.error（'ajax請(qǐng)求失?。? textStatus）;

}
}）;
在此代碼中，用服務(wù)器端腳本的URL替換“您的服務(wù)器端scrips”。>

>如何使用jQuery ajax將數(shù)據(jù)發(fā)送到服務(wù)器？

>您可以在jQuery Ajax方法中使用“數(shù)據(jù)”選項(xiàng)將數(shù)據(jù)發(fā)送到服務(wù)器。 “數(shù)據(jù)”選項(xiàng)應(yīng)該是屬性名稱是數(shù)據(jù)鍵，而屬性值是數(shù)據(jù)值的對(duì)象。數(shù)據(jù)將發(fā)送到HTTP請(qǐng)求正文中的服務(wù)器。以下是一個(gè)示例：

$。 ajax（{
url：'your-server-side-script'，
方法：'post'，
data：{
key1：{
key1： 'value1'，
key2：'value2'
}，
成功：function（響應(yīng)）{
//處理成功響應(yīng)
}
}）;

在此代碼中，用您的數(shù)據(jù)鍵替換服務(wù)器端腳本'key1'和'key2'的'your-side-scrips'和'value1'和您的數(shù)據(jù)值的“ value2”。

以上是jQuery ajax html5數(shù)據(jù)師自動(dòng)完成示例的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！