使用SearchWidget时如何避免点击结果后suggestedResult自动收起？

核心原理 #

SearchWidget 触发select-result事件时会默认执行两个操作：将选中结果的名称填充到搜索框、收起建议下拉面板。我们可以通过取消该事件的默认行为，手动控制面板的展开状态实现需求。

具体修改步骤 #

无需大幅调整原有逻辑，只需要在搜索组件初始化完成后，添加一段事件监听代码即可：

// 监听结果选择事件，阻止自动收起建议面板
searchWidget.on("select-result", (event) => {
  // 取消默认的收起、填充输入框行为
  event.preventDefault();
  // 手动保持建议面板展开
  searchWidget.suggestionsOpen = true;
  // 若需要保留搜索框内的原始搜索词，不替换为选中的结果名称，可取消注释下行代码
  // searchWidget.searchTerm = event.suggestResult.text;
});

完整参考代码 #

// 法国开放地址搜索API
const url = "https://api-adresse.data.gouv.fr/";

const map = new Map({
  basemap: "streets-vector"
});

const view = new MapView({
  container: "viewDiv",
  map: map,
  center: [2.21, 46.22], // 经度, 纬度
  scale: 3000000
});

const customSearchSource = new SearchSource({
  placeholder: "示例: 8 Boulevard du Port",
  // 实现getSuggestions方法为搜索组件返回建议列表
  getSuggestions: (params) => {
    // 调用第三方接口返回和用户输入关键词匹配的建议
    return esriRequest(url + "search/", {
      query: {
        q: params.suggestTerm.replace(/ /g, "+"),
        limit: 6,
        lat: view.center.latitude,
        lon: view.center.longitude
      },
      responseType: "json"
    }).then((results) => {
      // 格式化建议结果返回给搜索组件展示
      return results.data.features.map((feature) => {
        return {
          key: "name",
          text: feature.properties.label,
          sourceIndex: params.sourceIndex
        };
      });
    });
  },
  // 实现getResults方法返回选中建议对应的具体结果
  getResults: (params) => {
    const operation = params.location ? "reverse/" : "search/";
    let query = {};
    if (params.location) {
      query.lat = params.location.latitude;
      query.lon = params.location.longitude;
    } else {
      query.q = params.suggestResult.text.replace(/ /g, "+");
      query.limit = 6;
    }
    return esriRequest(url + operation, {
      query: query,
      responseType: "json"
    }).then((results) => {
      // 格式化搜索结果
      const searchResults = results.data.features.map((feature) => {
        const graphic = new Graphic({
          geometry: new Point({
            x: feature.geometry.coordinates[0],
            y: feature.geometry.coordinates[1]
          }),
          attributes: feature.properties
        });
        // 为点结果生成缓冲范围，用于视图缩放定位
        const buffer = geometryEngine.geodesicBuffer(
          graphic.geometry,
          100,
          "meters"
        );
        const searchResult = {
          extent: buffer.extent,
          feature: graphic,
          name: feature.properties.label
        };
        return searchResult;
      });
      return searchResults;
    });
  }
});

// 使用自定义搜索源初始化搜索组件
const searchWidget = new Search({
  view: view,
  sources: [customSearchSource],
  includeDefaultSources: false
});

// 新增：监听结果选择事件，阻止自动收起建议面板
searchWidget.on("select-result", (event) => {
  event.preventDefault();
  searchWidget.suggestionsOpen = true;
  // 若需要保留搜索框内的原始搜索词，可取消注释下行
  // searchWidget.searchTerm = event.suggestResult.text;
});

// 将搜索组件添加到视图右上角
view.ui.add(searchWidget, {
  position: "top-right"
});

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