Search code examples
angularjsui-select

Is there any way to choose ui-select-search value if there is no value in select?


I am using ui-select instead of using native select. This is the problem:

User can select pick_up address in array of location. If there is no address, then he can add new address. I want to use ui-select-search input field for filtering select and for this adding new uniq address if there is no searched term in ui-select-choices. Is there any way in which I can do that?

This is my code:

<ui-select
    ng-model="order.return_address"
    theme="bootstrap"
    tagging="order.return_address"
    tagging-label="false"
    reset-search-input="false"
    on-select="itemSelected($select.selected)"
    ng-required="isRequired"
    refresh="updateValue('pick_up', $select.search)"
    refresh-delay="900"
    name="pick-up-location">
    <ui-select-match>{{ $select.selected.title }}</ui-select-match>
    <ui-select-choices repeat="address in pickUpAddresses | filter: {title: $select.search}" refresh="refreshItems($select.search)" refresh-delay="700">
        {{ address.title }}
    </ui-select-choices>
</ui-select>

P.S. I dont want to see address that I am writing in the input field in pickUpAddresses array.


Solution

  • There is a way to make this work. So, I needed to position input field on same place with select and add to the both of then transparent background. When you are searching if you select something from ui-select-choices there will be no problem. And when you search and if there is no item in ui-select-choices, then you add this attribute to the ui-select reset-search-input="false" which will save value of the input. Now, you just need to take value from the input and that value is $select.search and then you have select and input in same view. Also, you need to reset $select.search if you select something and $select.selected if you chose input insted of select.