title: UI Autocomplete : Make multiple ajax requests or load all data at once for a list of locations in a city?
body: <p>I have a text box in my application which allows a user to select a location with the help of UI autocomplete. There are around <strong>10,000</strong> valid locations out of which the user <strong>must</strong> select one. There are two implementations for the autocomplete functionality:</p>
  
  <ol>
  <li>Fetch the list of locations when the page loads for the first time and iterate over the array to find matching items on every keystroke in javascript</li>
  <li>Make ajax requests on every keystroke as searching in MySQL(the db being used) is much faster?</li>
  </ol>
  
  <p>Performance wise, which one is better?</p>
  
  <p>An initial test shows that loading the data at once is the better approach from a performance point of view. However, this test was done on a MBP where JavaScipt processing is quite fast. I'm not sure whether this technique is the better one for machines with low processing power like lower end android phones, old systems etc.</p>