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)

Lasandralasater

could you maybe provide a fiddle or some? – Perdita

I do have a fiddle that works jsfiddle.net/pxfunc/j3AN7 - however when i added my "URL.action" it only accepted the first letter... – Lasandralasater

Try using single quotes within your validOptions variable since you enclosed it with double quotes: var validOptions = "@Url.Action('SerialProdNumStockSiteAutoComplete', 'Ajax')?stocksitenum=LW&model=" + $("#Form_Prod_Num").val(); – Handclap

it gives me error - "Bad compile constant value" – Lasandralasater

URL provided gives me error: GET http://fiddle.jshell.net/_display/@Url.Action('SerialProdNumStockSiteAutoComplete',%20'Ajax')?stocksitenum=LW&model=undefined&term=a 404 (NOT FOUND) – Handclap

@Handclap that won't work. Url.Action is processed server-side and ' is for a character, not a string. – Silkweed

@freedomn-m so what can i do to make it string – Lasandralasater

@freedomn-m for example it will return something like this "B061030029,LL-XXX," so for this example i can only type B - i cannot type "B0" – Lasandralasater

@mali Provide the rendered html (right click in browser, view page source) after the Url.Action (preferably with a very small subset of data (3-4 records)) – Silkweed

it doesnt show it in page source the url.action nor in the inspect element – Lasandralasater

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.

Silkweed

there is about 5 thousand values. not just 1. – Lasandralasater

Then your jsfiddle won't work - I provided a method to convert the Url.Action to match the jsfiddle as requested. There was no mention in the question about there being too many values. – Silkweed

oh sorry, so why is it that it only shows the first letter? – Lasandralasater

No problem, this should still work, but the whole paradigm would be completely sucky! Stop using autocomplete with pre-provided values and use the remote data option: jqueryui.com/autocomplete/#remote – Silkweed

thats complicated, the way iv done it is simple, its working with hard coded data but not with url.action, and i still dont understand why it only accepts the first letter and not the whole word.. – Lasandralasater

right, it works with hard coded data but for some reason its not working with the url.action – Lasandralasater