# Infoxchange Service Seeker search widget ## Demo A working demo can be found at https://widget.serviceseeker.com.au/demo.html ## Installation ### With search suggestions If using search suggestions (on by default, see options below to disable it), you will need jQuery and typeahead.js included on your page. If you do not already have these, add the following before ``: #### jQuery ```html ``` #### typeahead.js ```html ``` And the following inside ``: ```html ``` If you want to customise the style, we suggest you merge this CSS into your own and edit it rather than include this file. ### All setups Insert this before ``: ```html ``` ### Automatically add the widget to your page Place this snippet at the point in the page where you want the widget to be. You can have multiple widgets on the same page if desired. ```html ``` Inside this element will be a form, a search input, a submit button, and a link back to Service Seeker. ### Inserting the widget programatically The script exposes an ISS object that includes the ability to create a widget yourself. ```html ``` Note the lack of a class name - this widget will not be automatically populated. Create it manually via JS: ```js ISS.createWidget(document.getElementById('iss-search-widget')); ``` ## Customisation You are free to add any text around the search widget as normal, such as a heading or any styling. Pass options via `data-` attributes on your widget HTML. Here's an example to style the form with Bootstrap classes: ```html ``` If using the JS API: ```js ISS.createWidget(document.getElementById('iss-search-widget'), { inputClass: 'form-control', buttonClass: 'btn btn-primary', key: 'iss-api-key', secret: 'iss-api-secret' }); ``` Options may also be set globally, if you need multiple widgets on one page: ```js ISS.createWidget.defaultOptions.inputClass = 'form-control'; ``` ### Options **Note: All options are in camelCase. When using the `data-` API, option names are hyphen-separated (e.g. `form-class`).** #### `formClass`, `inputClass` and `buttonClass` Default: Not set. Set the CSS class attribute on these respective elements. #### `action` Default: `https://infoxchange.serviceseeker.com.au/#/search/%s` Optionally set this to search on a different Service Seeker website, rather than the default Infoxchange branded version. This string is formatted with `%s` being replaced with the URL encoded search string. #### `defaultLocation` Default: Not set If a user has not specified a location, will add the defaultLocation to their search string. ## Compatibility The widget was tested with recent versions of iOS, Android, Safari, Chrome, Edge and Firefox. The widget is tested with jQuery 1.12.4 and 2.2.4, typeahead.js 0.11.2 and jquery-ajaxtransport-xdomainrequest 1.0.3. It should also be compatible with previous versions of jQuery. JavaScript must be enabled for the form to work.