Search Widget outside Map View

[Henryobaseki]

Hi All,

My search widget is working fine in my mapview. But I would like it outside my mapview, to be parsed or embedded in the search form I have created in html, so I'm able to do the search in the form rather than the  search widget.in my map.

Thanks for your help..

see the code below; SearchWidget and  Div form for search

var searchWidget = new Search({

        view: view1

      });

      searchWidget.startup();

      // Add the search widget to the top left corner of the view

      view1.ui.add(searchWidget, {

        position: "top-right",

        index: 0

      });

<form action "" = id="searchWidget"  style="float: left" >

      <input type="text" name="q" value="Postcode or address" title="Postcode or address" 

size="21" maxlength="120"><input type="submit" value="search" class="tfbutton">

      <div id="searchWidget"></div>

    </form>

  <div class="tfclear">

[Jean-MarcRoy1 · Accepted solution]

Hi Henry obaseki‌,

You just have to use the "container" property in your widget constructor (Search widget 4.x). In this case you don't have to add your widget to the view.ui.

Furthermore the startup() method is deprecated since JS API 4.2.

With your code it will look like this :

var searchWidget = new Search({

        view: view1,

         container: "searchWidget"

      });

<form action="" id="searchWidgetForm"  style="float: left" >

      <input type="text" name="q" value="Postcode or address" title="Postcode or address" size="21" maxlength="120">

      <input type="submit" value="search" class="tfbutton">

      <div id="searchWidget"></div>

  </form>

[Henryobaseki]

Hi Jean,

Thanks, My search widget is outside my mapview. I think there is default styling with the widget is there a way of customising the style ?

Thanks anyways, my previous query was  answered.

[Jean-MarcRoy1]

Hi Henseki‌,

Related response for your question is here : parse search widget to a html search form.

Hope it helps!