Search jQuery

jQuery Forum

Using the Autocomplete widgets in the right and optimized way

in Using jQuery UI • 8 years ago

Hi,

I have read some books and tutorials about using jQuery UI, including Autocomplete widgets... So , I decided to make some simple application where I have JSON file named auto.json in which is data for the Autocomplete widget.

This is my code:

var arr = [];
$("#automobil").focus(function() {
    $.getJSON("auto.json", function(data) {
        $.each(data, function(key, value) {
            if ($.inArray(value.name, arr) === -1) {
                arr.push(value.name)
            }
        })
    });
}).autocomplete({
    source: arr
}).focusout(function() {
    arr = [];
});

On StackExchange I asked is it good to empty an array on focusout because my thoughts were that in "real world examples", there can be large amounts of data, so the array needs to be empty on focusout (after the job is done), because of resources...

This is the response that I received:

http://codereview.stackexchange.com/questions/85159/empty-an-array-on-focusout-jquery-ui-autocomplete/85230?iemail=1&noredirect=1#85230

I believe this is a case of being too paranoid in optimization. Here's some problems:

Your arr is global. You should probably place this somewhere only the widget knows about.

You're clearning the array... by creating another array. You're spawning more objects (in this case, an array) instead of cleaning up. The proper way to clear an array is to set length to 0. If nothing references the items in the array, they'll get GC'ed eventually.

autocomplete, focus, and focusout can go out of sync. When you focus on the input, you do getJSON. However, your autocomplete will run regardless if the request has returned. So that means the array might be empty when autocomplete runs. When you focus out, you cleared your array, so if you focus in again, this happens.

You're making unnecessary AJAX calls. On focus, you're calling AJAX. In the real world, waiting for AJAX is a more painful experience than memory consumption. With proper practice, the GC can and will reclaim memory but you can't reclaim the time you waited for AJAX.

I suggest you do the following instead:

You can limit the returned results to a reasonable length. That way, even if you hit the server with AJAX for each keypress, the return won't take that long.

Cache your results. Have some internal logic which caches returned data into an array (add when non-existent, update if existing). The problem here isn't the size of your cached data. It's the way you're discarding data and retrieving them back again.

I understand the essence of this response , but there are some details that are not clear to me , and I want to ask about that here:

Your arr is global. You should probably place this somewhere only the widget knows about.

1. In the case of my example that I posted above , can you tell me where, how to do it so my arr will not be global?

You're making unnecessary AJAX calls & autocomplete, focus, and focusout can go out of sync.

2. I really don't know how to do without AJAX calls. In the case of my example that I posted above , is it even possible to get data (that will be used by Autocomplete) without AJAX calls (and focus)?

Cache your results.

3. I know nothing about how to Cache results, maybe it has something to do with server-side (for example PHP)?

Thank you in advance!

Replies(8)

mike_laird

Re: Using the Autocomplete widgets in the right and optimized way

8 years ago

The comment about over-optimizing seems to apply. The detailed comments may or may not apply and be useful - depending on lots of things. My thoughts are:

1. If var arr=[]; is inside a function, it is not a global. You may have that situation on your full code, and the above extract omitted code like, $(document).ready(function() { //autocomplete stuff }.

2. In your code, an AJAX is called every time a focus event occurs. In the real world, users are sloppy and may move the cursor in and out several times (thinking, or whatever) before they commit to a click. Your posted code generates an AJAX call to your server every time the user moves their cursor in and out. Why do that? - is the question. Further, Autocomplete with a remote server can get out of synch - multiple calls for data and multiple returns of data (empty or full objects) overlap - and then freeze up. The current code is likely to generate poor user experience on your site.

3. Cacheing may or may not be needed. In most cases, it is not necessary. Use case is as important as data size. How frequently will a user ask for the same data in the same session, AND get large data returns?

A good general rule is build simple code, test for performance in typical and unusual, but real use cases. Test for user mess ups. Then fix specific use case problems. Performance usually depends on the size of returned data, and not on the size of stored data. If large data returns are common AND they cause performance problems, the simple way to deal with them is some combination of A. a LIMIT clause in your database's SQL statement, eg. LIMIT=10, and/or B. make minLength larger in the Autocomplete code. Play with them.

As a point of reference, one of my Autocompletes goes against a remote database service (located in a foreign country) with 6 million entries. I have a limit of 10, but it is seldom hit. Response time is sub second. I don't need cacheing.

mailfonrs

Re: Using the Autocomplete widgets in the right and optimized way

8 years ago

Thank you for the answer , Mike.

2. In your code, an AJAX is called every time a focus event occurs. In the real world, users are sloppy and may move the cursor in and out several times (thinking, or whatever) before they commit to a click. Your posted code generates an AJAX call to your server every time the user moves their cursor in and out. Why do that? - is the question. Further, Autocomplete with a remote server can get out of synch - multiple calls for data and multiple returns of data (empty or full objects) overlap - and then freeze up. The current code is likely to generate poor user experience on your site.

I understand what you want to tell me, it is , essentially , the same answer as I got on StackExchang. It is obvious that I have the wrong approach and the misconception of some things that are related to data collection - in my example (in the first post) I don't know how to do it in the correct way , without Ajax.

Or , right now , I'm trying to make a simple form that has input for the email address. I just created a JSON file named mails.json that looks like this :

[
  {"email": "random3245@ggmail.com"},
  {"email": "yes@bootstrap.bs"},
  {"email": "vhs@yahoo.com"},
  {"email": "asd@asd.asd"},
  {"email": "bambiplazma@yahoo.com"}
]

and, what I want is this: If the user enters the email address that already exists (for example: random3245@ggmail.com) - there will be warning that this email address is already in use .

I am using jQuery Validation Plugin, and I created the following custom rule:

$.validator.addMethod("checkMail", function(value, element) {
    $.getJSON("mails.json", function(data) {
        var emails = [];
        $.each(data, function(key, vl) {
            emails.push(vl.email);
        });
        return $.inArray(value, emails) === -1
    });
}, function() {
    return "This email is already registered"
});

Now, after reading your post I am sure that this is wrong because of calling AJAX (but also, for some reason it doesn't work well - if I enter any email I get: "This email is already registered ", always... don't know why).

But I really don't know how to do it in a right way, not by calling AJAX everytime... as well as with the example in my first post? Maybe my examples are wrong, maybe I should wait to learn server-side (PHP for example) and then try to do these examples?

Sorry for my bad English.

mike_laird

Re: Using the Autocomplete widgets in the right and optimized way

8 years ago

There is nothing wrong with using AJAX. In fact it is the best way to communicate between the web page and the server. The problem in your Autocomplete example is that the AJAX call is inside a focus() function. Look at the demo code for Autocomplete with a remote server for some ideas about structure.

http://jqueryui.com/autocomplete/#remote

The big problem with the Validation approach is that it will choke in production. You don't want to bring all email addresses from the server to the web page for a logic check. That is slow and expensive. The server should send a true or false signal (many ways to signal this) and the Validation code should just use the signal to select a display message. Don't process an array in Validation. Again, the problem is not AJAX.

If you are going to use a database, you have to learn some server language - PHP or Javascript in Node.js are commonly used.

watusiware

Re: Using the Autocomplete widgets in the right and optimized way

8 years ago

Use Ajax when it makes sense to use Ajax. Don't use Ajax when it doesn't.

If you have some data need in your page - regardless of what you intend to do with that data - maybe use it for autocomplete, maybe use it for validation - if you are able to deliver that data along with the page itself, do so. Don't send the data in a separate Ajax request.

If there is some good reason to use Ajax, then use Ajax. A good example is the case above of checking against a list of existing email addresses. Yes, this list might be too big to load into the page, and so in this case the server should do the check, and just send back a yay/nay. But there's another good reason to do the check on the server - if you send the list to the browser, you have now leaked the list! Anybody can just use inspection tools to look at the page and they will be able to find the list. You users probably won't be happy that you leaked their email addresses.

mailfonrs

Re: Using the Autocomplete widgets in the right and optimized way

8 years ago

mike_laird:

There is nothing wrong with using AJAX. In fact it is the best way to communicate between the web page and the server. The problem in your Autocomplete example is that the AJAX call is inside a focus() function. Look at the demo code for Autocomplete with a remote server for some ideas about structure.

http://jqueryui.com/autocomplete/#remote

Since I do n't know anything about server-side ( I plan to start to learn), when you have:

    $( "#birds" ).autocomplete({
      source: "search.php"

source: "search.php" means that Autocomplete widget will take entered text (from the input) and send it to search.php which will process it and send the response back to Autocomplete which will then display the suggestions? Have I understood correctly ?

mike_laird:

You don't want to bring all email addresses from the server to the web page for a logic check. That is slow and expensive. The server should send a true or false signal (many ways to signal this) and the Validation code should just use the signal to select a display message.

watusiware:

Yes, this list might be too big to load into the page, and so in this case the server should do the check, and just send back a yay/nay. But there's another good reason to do the check on the server - if you send the list to the browser, you have now leaked the list! Anybody can just use inspection tools to look at the page and they will be able to find the list.

I started to do these cases too early, I thought that if I learned some basics of JavaScript, jQuery... that I can create applications like this. I definitely have to learn server side language.

Now it is much clearer ! Thank you very much mike_laird & watusiware!!!

I have just one more question, let's , for a moment , forget about server side... How would you send entered email to the server and, then, how would you use validate plugin to receive response from server and display warning to the user if email is already registered (if server told us: "hey, this email address already exists in the database")??

Thank you in advance !

mike_laird

Re: Using the Autocomplete widgets in the right and optimized way

8 years ago

Your summary of how the search.php example works in Autocomplete is correct. You have understood the summary correctly. Congrats. This example is a 'simple' case where the user's typed characters are the only thing that needs to be sent to the server for a database query.

There are more complicated cases where additional data beyond the user's typing has to be sent to the server. An example is typing a city name for a state that has already been selected. In that situation, you need to use the jQuery ajax() function with its many options, rather than getJSON(). One of them is the data: option. In the city / state example, the already selected state data goes into the data:option, and the user types the city name into Autocomplete. An ajax() function in the source: option sends both to the server. Simply stated, when things get complicated, you use different software tools.

Regarding your 'one more question' - you had some of the right ideas. The steps would be something like: 1. enter email into an input box - no Autocomplete, you want a complete email address. 2. validate it for correct email format, Validate has a test for that, as I recall. 3. if OK, send it to the server via AJAX, 4. the server queries the database for that email address. 5. send a yes or no signal back to the client as the AJAX response. 6. use the signal in Validation to tell the user if that email is already in the database, and what to do in that situation.

mailfonrs

Re: Using the Autocomplete widgets in the right and optimized way

8 years ago

mike:

Regarding your 'one more question' - you had some of the right ideas. The steps would be something like: 1. enter email into an input box - no Autocomplete, you want a complete email address. 2. validate it for correct email format, Validate has a test for that, as I recall. 3. if OK, send it to the server via AJAX, 4. the server queries the database for that email address. 5. send a yes or no signal back to the client as the AJAX response. 6. use the signal in Validation to tell the user if that email is already in the database, and what to do in that situation.

Thanks, now looks even simpler than I thought in the beginning when I started this topic :)

This is all I need to do ( in the case of jQuery):

$( "#myform" ).validate({
  rules: {
    email: {
      required: true,
      email: true,
      remote: "check-email.php"
    }
  }
});

http://jqueryvalidation.org/remote-method/

Thank you for taking the time to help me!

mike_laird

Re: Using the Autocomplete widgets in the right and optimized way

8 years ago

mailfonrs ,

Thanks for posting your solution. The remote: option seems new (to me anyway) since I last used Validation, so I learned something, also.

Top Reply

Response title

Attachments

jQuery Forum

Using the Autocomplete widgets in the right and optimized way

Replies(8)

Re: Using the Autocomplete widgets in the right and optimized way

Re: Using the Autocomplete widgets in the right and optimized way

Re: Using the Autocomplete widgets in the right and optimized way

Re: Using the Autocomplete widgets in the right and optimized way

Re: Using the Autocomplete widgets in the right and optimized way

Re: Using the Autocomplete widgets in the right and optimized way

Re: Using the Autocomplete widgets in the right and optimized way

Re: Using the Autocomplete widgets in the right and optimized way

Statistics

Tags

Actions