1

this is the sample search widget in arcGIS, I want to override the search function, that the only thing that can be searched is the data in my query and it will appear just like in the picture

const [searchData, setSearchData] = useState(null);
const fetchSearchLocation = async (name) => {
const { data } = await client.query({  
  query: SEARCH_LOCATION,
  variables: {
    name: name    
  },
})
setSearchData(data);

return data;
};

  useEffect(() => {
    location();
  }, []);

 const location = () => {
    if (mapDiv.current) {
      esriConfig.apiKey = "sample api key";
      const map = new Map({
        basemap: 'arcgis-light-gray',
      });
      const view = new MapView({
        center: [123.5504, 12.3574], // Longitude, latitude
        container: mapDiv.current,
        map: map,
        zoom: 2, // Zoom level
      });
      const searchWidget = new Search({
        view: view,
        sources: [customSearchSource],
        includeDefaultSources: false
      });
  
      view.ui.add(searchWidget, { position: "top-left", index: 0 });
      view
        .when((r) => {})
        .then(() => {
          mapDiv.current = view;
          fetchData();
        });
    }
  };

  const searchDataLocation = new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log("searchData: ", searchData)
        resolve(searchData); //test_data = Your data.
    }, 1000);
  });

  const customSearchSource = new SearchSource({
    placeholder: 'Search',
    getSuggestions: (params) => {
       fetchSearchLocation(params.suggestTerm)
       console.log("searchData2: ", searchData)
        return searchDataLocation.then((data) => {
        console.log("datas: ", data) // the result is null.
      })
   ....

enter image description here

resource

https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Search.html

How to put queries in ArcGIS esri search?

note: this is edited question

  • Use a computed for the `selected` attribute on option? – Cyclonecode Dec 12 '21 at 12:45
  • computed? what do you mean? –  Dec 12 '21 at 12:47
  • https://stackoverflow.com/questions/40577394/where-to-handle-computed-properties-with-redux – Cyclonecode Dec 12 '21 at 12:56
  • I use react sir, can you please make a code base on my code? –  Dec 12 '21 at 12:58
  • I assume default value is `0` so in the resetting part you should have `setFormData({ intdepartmentsid: '0'})` instead of `setFormData({ intdepartmentsid: ''})` – Vigen Dec 12 '21 at 13:57
  • welcome back @kaito. My guess is there is an issue with how you are setting search data. Also looks like some of the code is redundant. mind setting another chat room to avoid cluttering comment section. – K450 Dec 21 '21 at 06:36
  • @K450 hello again, Okay sure –  Dec 21 '21 at 06:49
  • @K450 https://chat.stackoverflow.com/rooms/240193/discussion-between-k450-and-kaito –  Dec 21 '21 at 06:56

0 Answers0