ComboSearch

Back To Home

Back to Mapboard Topic Panel wiki

ComboSearch

A phila-vue-comps ComboSearch is an input that allows you to submit different inputs to different app functions.

In a Vue template

This is how a ComboSearch component is placed in an application:

<combo-search
  :dropdown="dropdownData"
  :search-string="searchString"
  :dropdown-selected="dropdownSelected"
  @trigger-combo-search="comboSearchTriggered"
  @trigger-clear-search="clearSearchTriggered"
  @trigger-search-category-change="comboSearchCategoryChange"
/>

Data

The example above uses variables for "dropdownData", "searchString", and "dropdownSelected". Those variables can be defined in the "data" of the vue component that includes the ComboSearch.

data() {
  return {
    dropdownData: {
      address: {
        text: 'Address',
        data: null,
      },
      keyword: {
        text: 'Keyword',
        data: null,
      },
    },
    searchString: '',
    dropdownSelected: '',
  }
}

Events

|event|definition| |---|---|---| |trigger-combo-search|submits the current typed-out value| |trigger-clear-search|clears the current typed-out value| |trigger-search-category-change|changes the category|