如何使用我的api在jquery中创建多个自动完成搜索框

时间:2015-12-07 12:50:28

标签: javascript jquery jquery-mobile

我正在制作一个JQM自动完成,其中有四个字段,即firstname,lastname,email,cell。当用户在名称字段中搜索时,JQM自动完成从我的API中提取数据:

https://www.tor4you.co.il/m/m2data.asp?u=searchtest@tor4you.co.il&p=12345&action=6&siteid=1126&fjax=e

当用户点击任何列表项时,它会将数据放入字段...

以下是我所做的:

HTML代码:

<form class="ui-filterable">
    <input id="autocomplete-input" data-type="text" placeholder="First Name">
    <input id="lastname" data-type="text" placeholder="Last Name">
    <input type="text" name="email" id="email" placeholder="Email">
    <input type="text" name="cell" id="cell" placeholder="Cell">
</form>

<ul id="autocomplete" data-role="listview" data-inset="true" data-filter="true" data-input="#autocomplete-input"></ul>

JQM代码:

$( document ).on( "pagecreate", "#myPage", function() {
    $(document).on("click", "li", function () {
        var text = $(this).text();
        siteName = text.split(',');
        $(this).closest("ul").prev("form").find("input").val(siteName[0]);
            $("#autocomplete li" ).addClass('ui-screen-hidden');
            $("#lastname").val(siteName[1]);
            $("#email").val(siteName[2]);
            $("#cell").val(siteName[3]);
            //$("#autocomplete").val(siteName);
        });
        $( "#autocomplete" ).on( "filterablebeforefilter", function ( e, data ) {
            var $ul = $( this ),
                $input = $( data.input ),
                value = $input.val(),
                html = "";
            $ul.html( "" );
            if ( value && value.length > 0 ) {
                $ul.html( "<li><div class='ui-loader'><span class='ui-icon ui-icon-loading'></span></div></li>" );
                $ul.listview( "refresh" );
                var url = 'https://www.tor4you.co.il/m/',
                mode = 'm2data.asp?u=',
                firstName = '&fjax='+value,        
                key = 'searchtest@tor4you.co.il&p=12345&action=6&siteid=1126';
                //alert(url + mode + key + firstName);
                console.log(url + mode + key + firstName);
                $.ajax({
                    //url: "http://gd.geobytes.com/AutoCompleteCity",
                    url: url + mode + key + firstName ,
                    dataType: "json",
                    crossDomain: true,
                    async: true,
                    success: function (result) {
                    ajax.parseJSONP(result);
                    },
                    error: function (request,error) {
                        alert('Network error has occurred please try again!');
                    }
                    //data: {
                        //q: $input.val()
                    //}
                })
                .then( function ( response ) {
                    $.each( response, function ( i, val ) {
                        //val += val.split(',');
                        html += "<li>" + val + "</li>";
                    });
                    $ul.html( html );       
                    $ul.listview( "refresh" );
                    $ul.trigger( "updatelayout");
                });
            }
        });
    });
});

请帮助,我在哪里设置回拨功能 但它总是给出网络错误。由于我没有太多经验,我无法理清错误。

0 个答案:

没有答案