CODEWITHSUNDEEP
javascriptjqueryjquery-uiautocompletejquery-ui-autocomplete
Smartboy
Smartboy

Reputation: 984

Jquery-UI autocompete change textbox value on `Keydown` event

I am using jquery-UI autocomplete in my project its working fine , my code is following 

   function split(val) {
        return val.split(/,\s*/);
    }
    function extractLast(term) {
        return split(term).pop();
    }
    $(".tags").autocomplete({

        source: function (request, response) {
            loc_array = request.term.split(',');
            var term = loc_array[loc_array.length - 1];
            $.ajax({
                url: "/Admin/Tag1/LookUpCompany",
                dataType: "json",
                data: "q=" + term,
                success: function (data) {
                    response($.map(data, function (item) {                  
                        return {
                            value: item.Name,
                            Name: item.Name
                        };
                    }));
                }
            });
        },
        select: function (event, ui) {
            event.preventDefault();
            var terms = split( this.value );
            // remove the current input
            terms.pop();
            // add the selected item
            terms.push( ui.item.value );
            // add placeholder to get the comma-and-space at the end
           // terms.push( "" );
            this.value = terms.join( "," );
            return false;
        },
        minLength: 1
    });

its working fine but there is a problem suppose when i load my page my text box have value
abc,def,ghi,

now if i enter any character it gives me suggestion in form of dropdown . If i click on it , it will append the clicked value with my current value , but if i move down using down key from keyboard then it changes the whole textbpx value with the current selected value . How to fix it ?

Thanks ,

Upvotes: 0

Views: 1082

Answers (1)

pregmatch
pregmatch

Reputation: 2657

This is my autocomplete code. Enter works for me.

$(".tags").autocomplete({
        source: function(request, response) {
            $.getJSON("/actions.php?action=autocomplete", {
                term: extractLast(request.term)
            }, response);
    },
    search: function() {
            /* custom minLength */
            var term = extractLast(this.value);
            if (term.length < 1) {
                return false;
            }
    },
    focus: function() {
            /*prevent value inserted on focus */
            return false;
        },
        select: function(event, ui) {
            var terms = split( this.value );
            /* remove the current input*/
            terms.pop();
            /* add the selected item*/
            terms.push( ui.item.value );
            /* add placeholder to get the comma-and-space at the end*/
            terms.push("");
            this.value = terms.join(", ");
            return false;
        }
    });

modify it so it fits your url. i am using jquery ui jQuery UI - v1.8.21

Upvotes: 1

Related Questions