Question

如上图所示，有一个下拉列表。当我从列表中选择<li>之一时，搜索框将填充<li>的内容，这是我想做的，但是Google Maps标记不会显示在地图中，除非我按下Enter键。

在这种情况下，Jackson Avenue, New York, USA我希望eventListener根据从下拉列表中选择项目或一旦搜索框填充了内容来触发。

this._searchEl.addEventListener('change', (event) => {
      let predictions = event.target.predictions;

      this.displayPlacesOnMap(predictions);
    });

我在change上使用，但没有达到我想要的。

  // Attach handler for the autocomplete search box. This updates the map
    // position and re-sorts locations around that position.
    this._searchEl.addEventListener('keyup', (event) => {
      if(event.target.value) {
        this._service.getPlacePredictions({
           input: event.target.value,
           offset: 3,
           types: ['geocode'],
           componentRestrictions: { country: 'us' },
           bounds: this._map.getBounds()
        }, (predictions) => {

          if(predictions) {

            let results = predictions.map(e => [e['description']]);

            this._missPlete.options = results;
            event.target.predictions = predictions;

          }
        });
      }

上方是用于显示下拉列表的库。 https://github.com/devowhippit/miss-plete-js/blob/master/src/MissPlete.js

如果在搜索框填充了列表项中的内容之后，我点击了enter，则会显示地图标记。但是，选择<li>时要使用什么事件？

 displayPlacesOnMap(mapItems) {
     if(mapItems) {
       mapItems.forEach(place => {
         let request = {
            placeId: place.place_id,
            fields: ['name', 'formatted_address', 'place_id', 'geometry']
         }

         const officeMap = this;

         this._placeService.getDetails(request, function(place, status) {
            if (status === 'OK') {
              officeMap._mapPosition = place.geometry.location;
              officeMap._map.panTo(officeMap._mapPosition);
              officeMap.sortByDistance().clearLocations().updateUrl().updateList()
                  .updateUrl();
              $(officeMap._searchEl).blur();
            }
         })
       })
     }
   };

Answer 1

可以使用这样的事件侦听器吗？这对您有用吗？

function doASearch() {
  console.log('searching');
}

document.addEventListener('click', (e) => {
  if(e.target.matches('.searchable')){
    document.querySelector('#search').value = e.target.innerText;
    doASearch();
  }
});

<ul>
  <li class='searchable'>Test</li>
  <li>Not Searchable</li>
</ul>
<input type="text" id="search">

根据从下拉列表中选择列表项触发eventListener

1 个答案: