Using .keyup function to filter auto complete

Question

Am using .keyup to filter my auto complete.

However it only allows me to enter the first digit. so if my data is "Apple"

when i type A - it shows Apple but i cannot type "AP" as the "P" disappears.

I was expecting that i can write the whole word rather than the first letter.

Code:

<input id="ac" /> <span></span>

var validOptions = "@Url.Action("SerialProdNumStockSiteAutoComplete", "Ajax")?stocksitenum=LW&model=" + $("#Form_Prod_Num").val();
previousValue = "";

     $('#ac').autocomplete({
            autoFocus: true,
            source: validOptions
        }).keyup(function () {
            var isValid = false;
            for (i in validOptions) {
                if (validOptions[i].toLowerCase().match(this.value.toLowerCase())) {
                    isValid = true;
                }
            }
            if (!isValid) {
                this.value = previousValue
            } else {
                previousValue = this.value;
            }
        });

This was working when i used dummy data, but when i changed this to url.action it only worked for the first letter rather than the whole word.

I do have a fiddle that works - however when i added my "URL.action" it only accepted the first letter. (There are about 5000 values)

Answer 1

In the fiddle, you're setting your available options as an array:

var validOptions = ["Bold", "Normal", "Default", "100", "200"]

if you take the result of your action (as called directly) and replace this into the jsfiddle, you'll get (taking from comment):

var validOptions = "B061030029,LL-XXX,"

or, depending on whether the quotes in the comment are included (unlikely):

var validOptions = ""B061030029,LL-XXX,"" 

either way, these aren't the same.

Use view-source in the browser to see what is being rendered by the Url.Action.

You can change your action to return the string:

"[\"B061030029\", \"LL-XXX\" ]";

which would then give:

var validOptions = ["B061030029", "LL-XXX"]

which matches the original options.

For neatness, you could do this with a PartialView and still continue to return the values from the action as a string list and format in the partial view rather than the controller.