How do I handle selection of multiple items with autocomplete? The objects I return from my JSON web service contain an ID and a Label - the ID is the ID of the entity in the database, and the Label is some text to display for the user.
At the moment, when I select an item in the autocomplete dropdown, the value of the item's ID is stored in a hidden field, and the label is displayed. When I remove the label, I clear the ID of the hidden field - this is done by adding an anchor element to the DOM that handles this.
Now, I want to have multiple selections. I want to be able to enter some text, get an autocomplete dropdown, select an item and some other options, then be able to click an 'Add New' button or the likes to be able to select another instance.
For example, I'd type in a person's name and get an autocomplete selection. I'd select a person, and then enter their age, and click 'Add'. The person's id, name, and age will be stored somewhere so that I can retrieve it on the server side when I post back.
I'm not quite sure how to do it? I'm thinking of a hidden field - I assume that many hidden fields of the same name/id turn up on the server side as an array, which I can then use. But I haven't tried this yet in ASP.NET.
How have you gone about this problem?
Well, no suggestions. I did it eventually by, in the autocomplete selection, creating a nicely styled span. It's text contains the label, it contains an anchor element that I bind a click event to that removes the element if necessary, and I use the jQuery data API to store the ID value on the span. This span gets added to a container div, before the textbox that I'm using to autocomplete. I also bind a keyup event to the textbox to check for backspace - when it's pressed and the textfield is empty, then I remove the last autocomplete item. It's a little more complex though, since by the time the keyup event is pressed, the character that was being removed from the textbox has already been removed, so I store the actual value in the keydown event too using the jQuery API and check this in the keyup event.
There is a hidden field on the form, that I keep populated with a comma-separated list of ID values extracted from the span's data. This can be kept in sync when adding/removing items, or only when I post back - it's simplest to just clear it and repopulate it, and is quite efficient as far as I can tell.
When loading the page, the spans and hidden field must be generated.
Hope this helps anyone else looking for a solution.
Related
Can someone give me a bit of advice on the following (common) scenario.
I have a list of "Incident" records with an edit button for each
The Edit button opens up an "Incident" edit form for that record
The edit form contains a tab control with four tabs, each of which has a table for child (related) records: actions, documents, quotes and invoices
Take the first relation "actions". The table datasource is Incident: Action (relation).
A Add Action button opens a page with a form with datasource inherited action and type insert
I remove the Incident Id dropdown because I want this to be populated automatically from the parent record.
I add a text box and give it a value: #pages.Edit_Incident.datasource.item.Id
The text box is populated with the correct value
The submit button with OnClick Create New Item writes the record but does not persist the parent id or Incident_fk
What am I missing? This must be a common scenario.
If I enforce referential integrity in the model it doesn't save.
How can I persist the parent Id value to the Incident_fk field? I need to bind the text box to the datasource even though the page's datasource is correct
I'm using an AutoCompleteExtender to perform auto-completion when the user type a username. I'm interested in keeping the username and the associated database ID. I have an OnClientItemSelected event which will put the ID of the selected item in an HiddenField. I also have FirstRowSelected to true.
Everything is working well except when the user manually type the full name without selecting it from the AutoComplete list. In this case, the OnClientItemSelected isn't fired and the HiddenField won't have the ID.
Is there a way to make sure that the text of the TextBox is included in the results of the AutoCompleteExtender?
I found my answer in the last few paragraphs of this website
I want to generate a drop down list from another drop down list. That is I have a dropdown of countries. When selecting a country,another dropdown must come with values as states of that specific country. How to do that in asp.net using c#?
for each country you have, add a new list item to the drop down list, with text the country and the value some id of the country. On the second drop down list, set the auto post back property to true and add an event to the on selected item change. In the event code, get the selected item and by the second ddl.
Try it!
Tip: add a hidden field on the page, and on the selected item changed event from the first ddl, set the value of the hidden field, the selected value. On the page_load event, verify if the value is string.empty and if is an id in the value. If it is, bind the second ddl.
The technology you're looking for is called a Cascading Dropdown.
If you are using WebForms then Ajax Control Toolkit then this has one built in:
http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/CascadingDropDown/CascadingDropDown.aspx
Otherwise you might need to do a further search if you are using MVC.
PS I'm not particularly proud of posting a link to the Ajax Control Toolkit as its not the best library out there but it is an easy drop in for what you want. If you're serious about doing a good job then I'd search for better options for cascading dropdowns.
The basic problem: selecting a few items from a list of thousands.
The potential solution:
I have an autocomplete field that searches the db, and returns a name/id pair. This is working fine.
The next step is to preserve the selected IDs, and allow the user to remove some if needed. For this, I've been looking at using a select, and was hoping a UI something like that provided by this, but it doesn't work: it allows you to select items that already exist in the select, but doesn't work with a dynamically created select.
The final step is a traditional postback (using a submit button, this is in asp.net webforms) where I'll need to have access to the final list of IDs.
Are there other options for this?
Based on your comments below, there are a lot of ways to skin this cat. The following approach is similar to the SelectList idea only it doesn't use a dropdown list. The nice thing about the Listbox versus the DropdownList is that the user will be able to view many items at once. Of course, the choice of using a Listbox or a DropdownList doesn't really matter as they both essentially provide the same functionality. The key about this answer is that values are stored on the client until you're ready to submit.
Create an autocomplete textbox that dynamically fills a Listbox as you type.
Clicking on a Listbox item results in two things happeing:
The ID of the selected item is stored in a client-side array
A list of items are rendered/re-rendered on the page exactly like the SelectList. Clicking the red 'X' will remove the ID from the array and re-render the list. You'll have to do a bit of jQuery coding on your side but it isn't much.
The above steps are repeated until the user has selected all of their items.
Upon clicking "Save", only the selected items are submitted to the server for processsing.
I have the following scenario.
I have a search page which is split into two divs. In the first, a user can create query parameters using a range of drop down menus. In the second div a user can enter text to source the query parameter and narrow the search further. On the drop down selectedindex change event, a radio button is selected indicating which search is being looked at.
i.e.
div1 div2
ddl1 tbx1
ddl2 ddl4
ddl3
rad1 rad2
Based upon their selection, the user can then click a button, btnReturn, that returns the query.
So therefore, I have the following questions.
If I have a range of drop downs, in div1, what sort of validation do I need to set up so that at least one of these drop downs needs to be selected in order for a query to be selected. I cannae just put in required fields as not all of these fields are required, a minium of one of these is need to product a reasonable search.
I am assuming I can do all of this using .net validation?
I am thinking I can use Validation Groups for div1 & div2 but is it possible to assign both groups to one control i.e. btn click? Is it a case of doing the last part programmatically?
And that concludes today's essay! any help, as always, greatly appreciated.
Create a user control (or custom control) wrapping all dropdowns. Then create a Custom Validator, set its validated control to the wrapper you created. Write a javascript function to check that at least one value is selected in the dropdowns and set the ClientValidationFunction property of the custom validator to use it.
Yes.
No, this wouldn't work in your case (unless you want a postback when switching between the DIVs). Create two submit buttons, and hide them on the client depending on the selected DIV.