基于api的Autocomplete功能求助：选建议标题跳转指定URL失败

Hey there! Let's fix that autocomplete redirect issue right away. Since you didn't share your existing code, I'll cover the most common implementation scenarios with working examples that you can adapt to your project.

If you're building the autocomplete from scratch, here's how to wire up the redirect when a suggestion is selected:

First, your basic HTML structure:

<input type="text" id="autocomplete-input">
<ul id="suggestions-list"></ul>

Then the JavaScript to handle rendering suggestions and the redirect:

const input = document.getElementById('autocomplete-input');
const suggestionsList = document.getElementById('suggestions-list');

// Sample data (replace with your actual data)
const suggestions = [
  { title: "First Article", url: "/articles/first" },
  { title: "Second Tutorial", url: "/tutorials/second" },
  { title: "Third Guide", url: "/guides/third" }
];

// Render suggestions based on input
input.addEventListener('input', () => {
  const query = input.value.toLowerCase();
  const filtered = suggestions.filter(item => item.title.toLowerCase().includes(query));
  
  // Clear existing suggestions
  suggestionsList.innerHTML = '';
  
  // Add filtered suggestions to the list
  filtered.forEach(item => {
    const li = document.createElement('li');
    li.textContent = item.title;
    // Store the URL as a data attribute
    li.dataset.url = item.url;
    
    // Handle click to redirect
    li.addEventListener('click', () => {
      window.location.href = li.dataset.url;
    });
    
    // Handle keyboard selection (Enter key)
    li.addEventListener('keydown', (e) => {
      if (e.key === 'Enter') {
        window.location.href = li.dataset.url;
      }
    });
    
    li.setAttribute('tabindex', '0'); // Make it focusable for keyboard users
    suggestionsList.appendChild(li);
  });
});

Key points here:

• Store the target URL in a data-url attribute on each list item for easy access
• Add click and keyboard event handlers to make it accessible
• Ensure list items are focusable with tabindex="0"

If you're using jQuery UI's popular autocomplete widget, the fix is straightforward using the select event:

<input type="text" id="autocomplete-input">

$(function() {
  const suggestions = [
    { label: "First Article", value: "/articles/first" },
    { label: "Second Tutorial", value: "/tutorials/second" },
    { label: "Third Guide", value: "/guides/third" }
  ];

  $("#autocomplete-input").autocomplete({
    source: suggestions,
    select: function(event, ui) {
      // Prevent the input from being filled with the URL (optional)
      event.preventDefault();
      // Redirect to the selected item's URL
      window.location.href = ui.item.value;
      // If you want to keep the title in the input, uncomment this:
      // $(this).val(ui.item.label);
    }
  });
});

Note: If you need to separate the label (displayed text) and URL, structure your source objects with label (for display) and value (or a custom property like url) for the redirect target.

For modern React projects using Material-UI's Autocomplete component, handle the redirect in the onChange event:

import React from 'react';
import Autocomplete from '@mui/material/Autocomplete';
import TextField from '@mui/material/TextField';

const suggestions = [
  { title: "First Article", url: "/articles/first" },
  { title: "Second Tutorial", url: "/tutorials/second" },
  { title: "Third Guide", url: "/guides/third" }
];

export default function MyAutocomplete() {
  const handleSelect = (event, value) => {
    if (value) {
      window.location.href = value.url;
    }
  };

  return (
    <Autocomplete
      options={suggestions}
      getOptionLabel={(option) => option.title}
      onChange={handleSelect}
      renderInput={(params) => <TextField {...params} label="Search" />}
    />
  );
}

Quick Troubleshooting Tips #

• Double-check that your suggestion data includes valid URLs (relative or absolute)
• Ensure event handlers are properly attached to each suggestion item
• Test both mouse clicks and keyboard navigation (Enter key) to make sure the redirect works in all cases

If you share a snippet of your existing code, I can help refine this even more!

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