Search code examples
angularjsdevexpressdevextreme

In devExpress, how to add a search box within select-box's dropdown list

I want to add a text-box to the top of the dropdown list that appears when a select-box is clicked. This way, I can filter and select a value.

Can this be done in devExpress?

I know that the template for each individual value can be modified by using dx-template, but can the dropdown list as a whole be modified (i.e. a text-box be added to the top for filtering)?

<div dx-select-box="vm.account1BoxConfig">
    <div data-options="dxTemplate:{ name:'accountItem' }">
        <span dx-text-box="{value: 'Mike'}"></span> // not working -- adds text-box to each value
            <span>{{::code}}</span>
            <small style="margin-left: 5px">[{{::name}}]</small>
    </div>
</div>

By the way, I don't want to type text in the select-box element - only in a text-box at the top of the drop-down. -- I know the select-box element can be used to type filter/search text-.

The only other option I can think of is to create a dx-list and toggle it when the input element is clicked....

Solution

  • I suggest you use dxLookup instead. It provides a search box in the drop-down out-of-the box. See the http://js.devexpress.com/Demos/WidgetsGallery/#demo/actions_and_lists-lookup-overview demo.