使用Typeahead.js预取本地JSON文件失败求助

Hey there! Let's work through why your local JSON file isn't loading with Typeahead.js—this is a super common issue, so we'll get it sorted out quickly.

First, let's break down the most likely culprits and fixes:

1. File Path Misalignment #

Double-check that your relative path ../app/helpers/countries.json actually points to the right file. Here's how to verify:

• Open your browser's Developer Tools > Network tab
• Refresh the page and look for the countries.json request
• If you see a 404 error, the path is wrong. Adjust it based on your project structure:
  • If your HTML file is in root/index.html and JSON is in root/app/helpers/countries.json, use ./app/helpers/countries.json (one dot, not two)
  • If your HTML is in root/public/index.html, then ../app/helpers/countries.json might be correct—just confirm the folder hierarchy visually.

2. Local File Protocol Restrictions #

If you're opening your HTML file directly (using the file:// protocol in your browser), most modern browsers block AJAX requests to local files for security reasons. This is probably the biggest issue if your external JSFiddle worked but local doesn't.

Fix this by running a local development server:

• Use Node.js: Install http-server via npm (npm install -g http-server), then run http-server in your project root and access the page at http://localhost:8080
• Use Python: Run python -m http.server (Python 3) or python -m SimpleHTTPServer (Python 2) in your project root
• Use tools like XAMPP/WAMP if you prefer a GUI setup

3. Bloodhound Configuration & JSON Structure Mismatch #

Make sure your JSON file structure matches what Bloodhound expects:

• If your countries.json looks like this:

  [{"country": "Afghanistan"}, {"country": "Albania"}, ...]
  

  Then your current datumTokenizer: Bloodhound.tokenizers.obj.whitespace('country') is correct. But if your JSON has a nested structure (like {"countries": [...]}), you need to add a filter to extract the data:

  prefetch: {
    url: "../app/helpers/countries.json",
    filter: function(response) {
      return response.countries; // Extract the array from the nested key
    }
  }
  

• Also, ensure your JSON is valid—even a missing comma or misplaced quote will break the load. Use an online JSON validator to check if needed.

4. Add Debugging to Catch Errors #

Modify your code to add initialization callbacks so you can see what's happening:

$(document).ready(function () {
  var dataSource = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('country'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    prefetch: "../app/helpers/countries.json"
  });

  // Add success/fail callbacks to debug initialization
  dataSource.initialize().done(function() {
    console.log('Bloodhound loaded the JSON successfully!');
  }).fail(function() {
    console.error('Failed to load JSON—check path, server, or file validity!');
  });

  $('.typeahead').typeahead({
    hint: true,
    highlight: true,
    minLength: 1
  }, {
    name: 'countries',
    source: dataSource,
    display: 'country' // Make sure this matches your JSON's field name
  });
});

Start with checking the local server and path first—those are the most frequent fixes for this exact scenario. Let me know if you hit any snags!

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