jQuery ajax ? html5 Datalist Autocomplete? ?? ?? ?? ?? (FAQ) Firefox?? Ajax? Datalist ??? ????????? Firefox? Ajax? Datalist ??? ????????? JQuery Ajax ???? ???????. ?? ?? ? ????? AJAX ??? ???????. ? ????? Datalist?? ???? ???? ???????. AJAX ??? ???? ?? ???? ???? ??????? ?? ? ????. ??? ?? ??? ????.

<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>

});

*Suburb:





*Postcode:

State:

? ???? 'Server-Side-Script'? ??????. '?? ? ????? URL?'your-datalist-id '? ?? Datalist? ID? ??. ?? ajax json? ?? jQuery autocomplete? ??? ??? ? ?????

jQuery UI? Ajax ? JSON? ?? ??? ??? ?? ?? ??? ?????. ?? ???? ?? ?? ??? ????? ?? ??? ???????. ?? ??? AJAX ??? ???? ?? ???? ???? ?? ?? ??? ??? ????????. ?? ??? ????.

$ ( '#your your-input-id'). autocomplete ({ source : function (request, response) { $ .ajax ({ DataType : 'json', data : { ?? : request.term

}, ?? : function (data) {}); });
? ???? 'your your-input-id'? ?????. ?? ??? ID ? ?? ? ????? URL? ?? '??? ?? ?? ????'? ????
jQuery ajax ? html5? ??? ??? ? ????? ?? ?? ????? Datalist?
jQuery ajax ? HTML5 Datalist? ???? ?? ?? ??? ?? ? ? ????. ?? HTML?? ?? ??? ??????? ???????. ?? ?? jquery ajax? ???? ?? ?? ??? ????? ???? ???????. AJAX ??? ???? ?? ???? ???? ??????? ?? ? ????. ?? ??? ????.


$. ajax ({
url : 'your -server-side-script ', success : function (data) { var datalist = $ ('#your-datalist-id '); datalist.empty ();
$ .Each (data, function (index, value) {} });
? ???? 'your-datalist-id'? Datalist? ID? ??? '??? ??-??? ????'? ??? URL? ?????. ?? ? ????.
jQuery ajax ???? ??? ??? ?? ? ? ???????
jQuery ajax? ??? ???? ? ?? ??? ?????. ?? ???? ??? '??'?? ?????. ? ??? AJAX ??? ?? ? ? ???? ?????. ? ??? JQXHR ??, ?? ??? ???? ??? ? ??? ?? ??? ??? ?? ? ?? ???????. ?? ??? ????.
$. ajax ({ ?? : ?? (data) { // ???? ?? ??
}, ?? : ?? (JQXHR, TextStatus, Errorthrown) { console.error ( 'Ajax ?? ?? :' TextStatus); }
});
? ???? '?? ? ????'? ?? ? ????? URL? ?????. jquery ajax? ???? ??? ???? ?? ? ?????

jQuery ajax ????? '???'??? ???? ??? ???? ?? ? ????. '???'??? ?? ??? ??? ??? ?? ?? ??? ?? ?? ?????. ???? HTTP ?? ??? ??? ?????. ?? ??? ????.

$. ajax ({ url : 'your-server-side-script',

??? : 'post', data : { key2 : 'value2'}, ?? : ?? (??) { // ???? ?? ?? } });
? ????? ?? ? ????? URL? 'Server-Side-Script'? 'key1'? 'key2'? URL? ??? 'value1'? ?????. ??? ??? ?? ?? 'value2'