JQuery autofill fire when typing a keystroke

Im using jQuery UI autocomplete and it works fine, but I am trying to get around this problem and would appreciate some help. Autocomplete is located in the text box inside the asp panel, the default behavior of the form on the Enter key is to submit the form. If the user types something into the Autocomplete text box and presses Enter, I want the auto-complete web service to go blank and return the results to Enter. I read online, I supposed to handle the Keypress event for autocomplete, I tried, but not sure how to call autocomplete to start a keystroke, I show my code below, if anyone has an idea how to do this please show an example in in the code, since they had a problem with the correct syntax to call the function on the keyboard, your help is appreciated, here is the code.

//Attach autocomplete to txtCity so user can lookup SPLCS by cities

        var city;
        var txtCity = $("[id$=txtAutoCity]")
        $(txtCity).autocomplete({
            source: function (request, response) {
                request.term = request.term.replace(/[^a-zA-Z\s]+/, "")
                $.ajax({
                    url: "../../Services.asmx/GetOfficesByCity",
                    data: "{ 'city': '" + request.term + "' }",
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    dataFilter: function (data) { return data; },
                    success: function (data) {
                        response($.map(data.d, function (item) {

                            if (data.d != undefined) {
                                return {
                                    value: item.Display,
                                    result: item.CommaDelimited
                                }

                            }
                            else {
                                return true;
                            }
                        }))
                    },

                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert(errorThrown);
                    }
                });
            },
            autoFill: false,
            minLength: 2,
            delay: 800,
            mustMatch: false,
            selecFirst: false,
            select: function (event, ui) {
                var selectedObj = ui.item;
                if (ui.item) {
                    city = ui.item.result.split(',')[0];

                    $("[id$=txtCity]").val(ui.item.result.split(',')[0]);
                    $("[id$=txtOffice]").val(ui.item.result.split(',')[1]);
                    $("[id$=txtDistrict]").val(ui.item.result.split(',')[2]);


                }
            },
            // Any action to be performed once the auto complete list closes
            close: function (event) {

            }
        }).keypress(function (e) {
            if (e.keyCode === 13) {
                //How to cancel default submit behaviour of form and call this
                //autocomplete function to fire??   
                e.preventDefault();
                //my_search_function($(txtCity).val())
            } 
        });
+3
3

.

($txtCity).autocomplete( "search", "TheSearchValueToSend" )

JQuery Doco Site

+1

, , :

  • (var canPass = false);
  • ;
  • keypress;

, :

// txtCity, SPLCS

    var canPass = false;
    var city;
    var txtCity = $("[id$=txtAutoCity]")
    $(txtCity).autocomplete({
        source: function (request, response) {
            request.term = request.term.replace(/[^a-zA-Z\s]+/, "")
            $.ajax({
                url: "../../Services.asmx/GetOfficesByCity",
                data: "{ 'city': '" + request.term + "' }",
                dataType: "json",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                dataFilter: function (data) { return data; },
                success: function (data) {
                    response($.map(data.d, function (item) {

                        if (data.d != undefined) {
                            return {
                                value: item.Display,
                                result: item.CommaDelimited
                            }

                        }
                        else {
                            return true;
                        }
                    }))
                },

                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(errorThrown);
                }
            });
        },
        autoFill: false,
        minLength: 2,
        delay: 800,
        mustMatch: false,
        selecFirst: false,
        select: function (event, ui) {
            var selectedObj = ui.item;
            if (ui.item) {
                city = ui.item.result.split(',')[0];

                $("[id$=txtCity]").val(ui.item.result.split(',')[0]);
                $("[id$=txtOffice]").val(ui.item.result.split(',')[1]);
                $("[id$=txtDistrict]").val(ui.item.result.split(',')[2]);


            }
        },
        // Any action to be performed once the auto complete list closes
        close: function (event) {

        },
        search: function (value, event) {
            if (!canPass) {
               event.preventDefault();
            }
            else {
               canPass = false;
            }
        },
    }).keypress(function (e) {
        if (e.keyCode === 13) {
           canPass = true;
           $(txtCity).autocomplete("search", ($txtCity).val());
        }
    });

, , ENTER.

+2

, . ,

-, , . , , ( , , , , , ENTER, ).

ENTER, "keydown", . jsFiddle , : http://jsfiddle.net/2Z25f/

,

toepoke.co.uk

0

All Articles