jQuery autocomplete输入前几个字母时卡顿问题求助

Hey there! Let's figure out why your delivery city autocomplete is lagging when you type the first few letters, and how to fix it. Looking at your code snippet, there are a few key areas we can tweak to smooth things out.

Common Causes & Fixes #

1. Stop Duplicate AJAX Requests #

Your current polling logic might be firing multiple overlapping AJAX calls if the first request takes time to complete. This wastes resources and can cause lag as the browser tries to handle multiple data loads at once.

Add a "request in progress" flag to prevent duplicate calls:

getAllActiveCitiesList: function(){
  // Add a flag to block new requests while one is already running
  if (js_script.script.isFetchingCities) return;
  js_script.script.isFetchingCities = true;

  js_script.script.cities_polling_count += 1;
  js_script.script.ajax_loading_message = "Fetching all active and approved cities....give us a minute!"
  
  if(js_script.script.all_active_approved_citiess == null && js_script.script.cities_polling_count < 12){
    $.ajax({
      type: "GET",
      url: "some/url/to/fetch/data",
      success: function(data) {
        js_script.script.all_active_approved_citiess = data;
        // Reset the flag once data loads successfully
        js_script.script.isFetchingCities = false;
        // Trigger autocomplete refresh here if needed
      },
      error: function() {
        // Don't forget to reset the flag on error too!
        js_script.script.isFetchingCities = false;
      }
    });
  }
}

2. Optimize Data Filtering #

If your city list is large, filtering all results client-side on every keystroke (especially the first few letters, which match tons of entries) will slow things down. Try these tweaks:

• Move filtering to the backend: Instead of fetching every city upfront, send the user's typed keyword to your API and let the server return only matching results. This reduces the data your browser has to process.
• Preprocess data for faster matching: Convert all city names to lowercase once when loading data, instead of doing it every time you filter. Example:

  // When loading data
  js_script.script.all_active_approved_citiess = data.map(city => ({
    name: city.name,
    lowerName: city.name.toLowerCase()
  }));
  
  // When filtering
  const query = userInput.toLowerCase();
  const filteredCities = js_script.script.all_active_approved_citiess.filter(city => 
    city.lowerName.includes(query)
  );
  

3. Add Debouncing to User Input #

Don't trigger filtering or requests on every single keystroke. Use a debounce function to wait until the user stops typing (e.g., 300ms) before processing their input. This cuts down on unnecessary work:

let autocompleteTimeout;
$('#your-city-input').on('input', function() {
  clearTimeout(autocompleteTimeout);
  autocompleteTimeout = setTimeout(() => {
    const inputVal = $(this).val().trim();
    if (inputVal.length < 1) return;

    if (js_script.script.all_active_approved_citiess) {
      // Filter local data and update autocomplete source
      const filtered = js_script.script.all_active_approved_citiess.filter(city => 
        city.name.toLowerCase().includes(inputVal.toLowerCase())
      );
      $(this).autocomplete('option', 'source', filtered);
    } else {
      // Load data if it doesn't exist yet
      js_script.getAllActiveCitiesList();
    }
  }, 300); // Adjust this delay as needed
});

4. Preload Data Upfront #

Instead of waiting for the user to start typing to fetch cities, load the list when the page initializes. This way, data is ready immediately when the user starts typing:

$(document).ready(function() {
  js_script.getAllActiveCitiesList();
});

Quick Check #

Also, make sure your city data is in a simple format (e.g., an array of strings or objects with label/value properties). Complex nested structures will slow down filtering.

Give these changes a try—they should eliminate that initial typing lag and make the autocomplete feel snappier!

内容的提问来源于stack exchange，提问作者NoobEditor