ASP.NET AJAX Autocomplete duplicate selection issue

[jagadish]

In autocomplete textbox i am able to select same item multiple times, how can i avoid selecting same item multiple times.

Example:

1. Autocomplete shows list of fruits

2. I will select Apple.

3. Next again i will select apple

 

Now apple is selected 2 times, this is a problem.

How to avoid this?

Please help me in this regard.

Thanks for your cooperation in advance.

 

--

Jagadish Konnur

[Aneliya Petkova]

Hi Jagadish,

I checked the support ticket that you sent and will also paste the answer here in case anyone else is interested in it:

​ I would suggest you to use the client-side OnClientEntryAdding event and in its handler to check whether there is an entry with the same text and value in the RadAutoCompleteBox input already. So if there is such entry, you can cancel this event using eventArgs.set_cancel(true); Thus this item will not be added to the entries collection again.

​Please check our help articles for additional information:
http://docs.telerik.com/devtools/aspnet-ajax/controls/autocompletebox/client-side-programming/overview

Regards,
Aneliya Petkova
Telerik

[Pierre]

"I will also paste the answer here in case anyone else is interested in it"

Where is it ?

[Sam]

function TestMulti(sender, args) {
            var entries = sender.get_entries();
            for (var i = 0; i < entries.get_count() ; i++) {
                if (entries.getEntry(i).get_value() == args.get_entry().get_value()) {
                    args.set_cancel(true);
                }
            }
        }

[Ciupaz]

How can I call this TestMulti function?

 

L.

[Ciupaz]

I've set here:

 

<telerik:RadAutoCompleteBox RenderMode="Lightweight" runat="server" ID="acbCliente"                   EmptyMessage="Cliente" OnClientEntryAdding = "TestMulti"                    DataTextField="RagSoc" InputType="Token" Width="385" DropDownWidth="150px">                 </telerik:RadAutoCompleteBox>

 

but TestMulti JavaScript function does not work. 

C.

[Ciupaz]

An "i" was missing in the JavaScript function.

The correct version in here: 

if (entries.getEntry(i).get_value() == args.get_entry(i).get_value()) {

 

 

[Yan Moura]

I may be wrong but it's not the mission of AutoCompleteBox to get track of your tokens. You have to write your own code to control this.

The best way of doing it is by removing the item from your list once it's picked by the user. Ideally you should push it into an array to keep track of used items to restore them back in case of user delete the token(s).

[Ciupaz]

Do you have an example?

My autocompletebox takes data from a DataTable in code-behind.

[Peter Milchev]

Hello L.,

The TestMulti is the name of the function that is used as a client-side event handler of the OnClientEntryAdding event:

• https://docs.telerik.com/devtools/aspnet-ajax/controls/autocompletebox/client-side-programming/events/oncliententryadding

That is why the args.get_entry(i) is actually not correct and it should be args.get_entry().

Regarding the items being able to be selected only once, I can recommend using the MultiSelect control instead:

• https://demos.telerik.com/aspnet-ajax/multiselect/overview/defaultcs.aspx

Regards,
Peter Milchev
Progress Telerik

[Ciupaz]

Hi Peter,
thank you for your clarification.

But, with RadMultiSelect, if I choose Anne King, is it possible to not show Anne King in dropdownlist below? 

 

[Peter Milchev]

Hello L.,

The easiest way is to hide the selected items with CSS:

<style>
    .RadMultiSelectDropDown .k-item.k-state-selected {
        display: none
    }
</style>

The only downside of this approach is that when navigating through the items in the dropdown with the arrows, the items will still be focused, but due to the fact that the item element itself is hidden, there will be no UI indication what is focused.

Another option is to style the selected item as a disabled one. 

Generally, the items are designed to remain in the dropdown, so that the user can deselect the item by clicking it in the dropdown, not only via the tags.

Regards,
Peter Milchev
Progress Telerik

[Ciupaz]

Thank you Peter, this could be a good solution.

Luigi.