jQuery ajax html5 datalist autocomplete例

このコードはHTML5 Datalistタグを使用して、テキストフィールドにオートコンプリートオプションをセットアップします 。 AJACリクエストを使用してJSONファイルからデータを取得します（JSオブジェクトに必要な場合またはローカルにブラウザに保存できるデータ）。次に、郊外の選択を使用して、郊外が変更されたときに他のフィールドポストコードと状態を自動包装します。 Safariを除くほとんどすべてのブラウザで、おやつのように機能します。 注：HTML Datalistはまだすべてのブラウザーと互換性がありません。互換性を参照してください。バックフィルプラグインには、これを使用してください：jquery.RelevantDropdowns.js - データリストのオプションを交換するオプションのLIでULタグを挿入します。

HTML5 Datalist Tag

フルjQuery

このコードは、JSONを介してDatalistに入力され、Autoは、ユーザーによるフィールドの自動選択に基づいて他のフィールドを埋めます。

<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を返します - 必要に応じて、データベースからデータをGSONまたは.PHPである可能性があります。

<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トリガーデータリスト

Alt Down Arrowを使用して、ユーザーアクションをシミュレートします。 jqueryを使用して、複数のトリガーキープレスをシミュレートする必要があります。 keycode 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>

jquery ajax and html5 datalist autocompleteに関するよくある質問（FAQ）

​​firefoxでAjaxでデータリストのオプションを動的にロードするには、jquery ajaxメソッドを使用する必要があります。まず、サーバー側のスクリプトにAJAX要求を作成する必要があります。このスクリプトは、データリストに入力するデータを返す必要があります。 AJAX要求が成功したら、応答データを使用してDatalistに入力できます。簡単な例は次のとおりです。

$。ajax（{success：function（data）{
var datalist = $（' ＃your-datalist-id '）;
datalist.empty（）;
$ .each（data、function（index、value）{
datalist.append（ ''）;
}）;
}
} 「サーバー側のスクリプトのURLと、データリストのIDを使用した「あなたの義理のID」を使用してください。

コールバックajax jsonでjquery autocompleteを使用するにはどうすればよいですか？

​​

jquery uiは、AjaxとJSONで使用できるオートコンプリートウィジェットを提供します。入力フィールドのオートコンプリートウィジェットを初期化し、ソースオプションを提供する必要があります。ソースオプションは、AJAX要求を作成し、応答データを使用してオートコンプリートの提案を入力する関数である必要があります。例は次のとおりです。

$（ '＃your-input-id'）。autocomplete（{
source：function（request、response）{
$ .ajax（{ url： 'Your-Server-Side-Script'、 data：{
Term：request.term
}、
成功：function（data）{
response（data）;
}
}）;
}
}）;
;入力フィールドのIDとサーバーサイドスクリプトのURLを使用した「Your-Server-SideScript」を使用してください。 Autocomplete機能？
​​
jQuery ajaxおよびHTML5 Datalistを使用して、オートコンプリート機能を作成できます。まず、HTMLに入力フィールドとデータリストを作成する必要があります。次に、jquery ajaxを使用して、オートコンプリートの提案に使用するデータを取得する必要があります。 AJAX要求が成功したら、応答データを使用してDatalistに入力できます。例は次のとおりです。

$。ajax（{
url： 'your -server-side-script '、
success：function（data）{
var datalist = $（'＃your-datalist-id '）;
datalist.empty（）;
$ .each（data、function（index、value）{
datalist.append（ ''）;
}）;
}
}）;
このコードでは、「Your-Datalist-id」をデータリストのIDに置き換え、「server-side-script」をあなたのURLに置き換えますサーバー側のスクリプト。最も一般的な方法は、「エラー」コールバックオプションです。このオプションは、AJAX要求が失敗したときに呼び出される関数です。関数は、JQXHRオブジェクト、エラーのタイプを記述する文字列、および発生した場合のオプションの例外オブジェクトの3つの引数を受信します。例は次のとおりです。

$。ajax（{success：function（data）{
//成功した応答を処理する}、

エラー：function（jqxhr、textStatus、errorthrown）{

console.error（ 'ajax要求が失敗しました：' textStatus）;

}

}）;
このコードでは、「server-side-script」をサーバー側のスクリプトのURLに置き換えます。

jQuery ajaxを使用してサーバーにデータを送信するにはどうすればよいですか？

​​

jQuery ajaxメソッドの「データ」オプションを使用して、サーバーにデータを送信できます。 「データ」オプションは、プロパティ名がデータキーであり、プロパティ値がデータ値であるオブジェクトである必要があります。データは、HTTPリクエストの本文でサーバーに送信されます。例は次のとおりです。

$。ajax（{メソッド：' post '、
data：{
key1： 'value1'、
key2： 'value2'
}、
success：function（response）{
//成功した応答を処理します
}
}）;
このコードでは、「サーバーサイドスクリプト」をサーバー側のスクリプトのURL、「key1」および「key2」に置き換えます。データ値を使用して「value2」

以上がjQuery ajax html5 datalist autocomplete例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。