javascript - 通过数组转换在数组中按值查找键

Question

我有一个 id="autocomplete-input"的简单输入字段和一个 id="searchButton"的按钮。然后，我使用带有键值对的 PHP 数组，以便您可以在输入字段中键入值，然后找到该值的正确键。我为此使用了 javascript，所以我还需要将 PHP 数组转换为 javascript。请参阅下面我的代码:

  <nav>
    <div class="nav-wrapper">
      <div class="input-field center-align">
        <input type="text" class="autocomplete" name="search" id="autocomplete-input" placeholder="Search.." />
        <button class="icon" id="searchButton"></button>
      </div>
    </div>
  </nav>

  <?php
    $testArray = array (
      'yellow' => 'banana',
      'red' => 'apple',
      'green' => 'pear'
    );
  ?>

  $('document').ready(function(){
      $('#searchButton').click(function(){
          var compSearch = document.getElementById('autocomplete-input').value;
          var tempArray = <?php echo json_encode($testArray); ?>;
          var key = search(compSearch, tempArray);
          document.getElementById("autocomplete-input").value = (key);
      })
      $('#searchButton').keypress(function(e){
          if(e.which == 13){ //Enter key pressed
              $('#searchButton').click(); //Trigger search button click event
          }
      });
  });

  function search(nameKey, myArray){
      for (var i=0; i < myArray.length; i++) {
          if (myArray[i].name === nameKey) {
            return myArray[i];
          }
      }
  }

无论输入什么，单击搜索按钮后我只会返回“未定义”。我不确定这是否是“搜索”功能无法正常工作 - 我认为 $testArray 的 json_encode 也可能会导致问题？我非常感谢任何帮助。

Answer 1

tempArray 不会是一个数组(*)，而是一个普通对象，如下所示:

{
  yellow: 'banana',
  red: 'apple',
  green: 'pear'
}

^{* 只有索引数组(从索引 0 开始且没有间隙)的 PHP 数组才会转换为 JS 数组。否则它们会转换为普通对象。}

所以搜索应该看起来像这样:

return myArray[nameKey];

...但也许选择一个更好的变量名称，因为它不是数组。