基于Keyup的多条件字符串搜索开发：前缀匹配+字符长度筛选

Got it, let's upgrade your existing search function to handle both prefix matching and character length filtering at the same time. Here's a straightforward implementation that works smoothly with your 2100-item list:

Step 1: Update the HTML #

First, add a number input for the character length filter right next to your search input—this keeps the UI intuitive for users:

<!-- Prefix Search Input -->
<input type="text" id="myInput" onkeyup="mySearchFunction()" placeholder="Enter prefix...">

<!-- Character Length Filter Input -->
<input type="number" id="lengthInput" onkeyup="mySearchFunction()" placeholder="Enter character length...">

<!-- Your Target List -->
<ul id="stateList">
  <li>apple</li>
  <li>app</li>
  <li>appreciation</li>
  <!-- Insert your 2100 items here -->
</ul>

Step 2: Modify the JavaScript Function #

We'll tweak your existing function to:

1. Capture the length input value and convert it to a usable number
2. Check both prefix match and length conditions (skip length filtering if the input is empty)
3. Use startsWith() instead of indexOf() for strict prefix matching (since you want results that start with the input text, not just contain it anywhere)

Here's the updated function:

function mySearchFunction() { 
  // Declare variables 
  var input, filter, lengthInput, targetLength, ul, li, item, i, txtValue; 

  // Get and normalize prefix search input
  input = document.getElementById("myInput"); 
  filter = input.value.toUpperCase(); 

  // Handle length filter input (convert to number, ignore empty values)
  lengthInput = document.getElementById("lengthInput");
  targetLength = lengthInput.value ? parseInt(lengthInput.value) : null;

  // Grab list container and items
  ul = document.getElementById("stateList"); 
  li = ul.getElementsByTagName("li"); 

  // Loop through all list items
  for (i = 0; i < li.length; i++) { 
    item = li[i]; 
    txtValue = item.textContent || item.innerText; 
    const txtUpper = txtValue.toUpperCase();

    // Check dual conditions:
    // 1. Text starts with the input prefix (case-insensitive)
    // 2. If length is specified, text length matches the target
    const matchesPrefix = txtUpper.startsWith(filter);
    const matchesLength = targetLength === null || txtValue.length === targetLength;

    // Show/hide items based on combined matches
    li[i].style.display = (matchesPrefix && matchesLength) ? "" : "none";
  } 
}

Key Details Explained #

• Strict Prefix Matching: Swapped indexOf() for startsWith() to ensure we only return items that begin with your input (no partial matches in the middle of the string).
• Flexible Length Filter: If the length input is empty, the function falls back to just prefix search. When a number is entered, it only shows items that meet both criteria.
• Performance: Looping through 2100 items is totally lightweight here—this approach won't cause lag on keyup events even with your full list.

Test the Example #

For your sample list (apple, app, appreciation):

• Enter prefix "ap" and length 5 → only apple appears
• Enter prefix "ap" and length 12 → only appreciation appears
• Enter just "ap" (no length) → all three items show up

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