I would like to have a textfield input with a datalist of e.g. 10 fixed options.
Instead of the usual autocomplete behavior, I would like the dropdown to always show the complete list.
Especially, if the input has a pre-filled value, and the user clicks, I would like the dropdown to open and show the unfiltered list of options, so the user can use it like a select element.
Any idea how to do that?
Related
I am trying to get the default selected value from a dropdown list. There are no Options or Values in the HTML code that I can see when I inspect the code.
This is what the screen looks like when the user enters it.
If you click the dropdown, you will see that the value 8 is highlighted because it is the default value
The HTML code does not show the value 8 anywhere nor any of the other values listed that can be selected. I need to verify that the default value is 8 but I'm having a hard time finding the correct code to do this.
This is the html:
I can use this Xpath to click on the dropdown button:
//[contains(#class,'label')][text()='Minimum Length']/ancestor::/following-sibling::1//[#role='combobox']//*[contains(#class,'filterselect-button')][#role='button']
This will also click on the combo box and allow the dropdown list to appear
//[text()='${Name}']/parent::/following-sibling::1//[contains(#type,'text')]
When using Kendo UI Autocomplete with filter: 'contains' and suggest: true if the user types-in a value that causes a match in the middle (say kingdom in the demo) and tabs out, the value becomes kingdom and not United Kingdom as one would expect. This causes data entry errors. Anyway to enforce the desired behavior? We want the users to be able to type-in anything if they could not find any option so mandating a selection isn't an option but we want the users to be able to pick a selection once they find it rather than current behavior where if the tab, they lose the found selection unless they select it manually... something like if they typed in the value that matches in the starting (e.g. united in the demo) and tabing out. The match using contains instead of startsWith is also desirable.
As the Kendo UI AutoComplete allows for custom values (a behavior that you are saying you want to keep), the widget does not have a built-in way to distinguish between a custom value, and a match that you want to select from the list (like in the example - when the user types "united" and presses TAB, he may simply want the widget to have value "united", and not necessarily "United Kingdom").
You can achieve the desired behavior by implementing some custom "blur" event handler, and setting the value of the AutoComplete to be the one from the list, if for example the length of the list is 1 when the user presses TAB, or otherwise blurs the widget's input, for example:
Modified example
My goal is to Programmatically select items from the List of the combo box, but without updating the edit control. The same can be achieved with the mouse. E.g. when you drop down and hover an item from the list, that item is highlited. And that is all. If you want to select in it the combo box (e.g. move it to the edit control) - you must click on the LisBox.
I tried with CB_SELECTSTRING. But it automatically updates the ComboBox edit control with the selected text which is not what I want. I want to do this using raw Win32 or VB6
Thanks
There is a big difference between highlighting an item in the drop-down list and actually selecting an item to make it active. CB_SELECTSTRING selects an item, as its name implies. But there is no official ComboBox API to highlight an item, though.
However, you can display the drop-down list manually (CB_SHOWDROPDOWN), and either:
move the mouse over the desired item so the list can perform hot-tracking logic.
manipulate the list directly. Use CB_GETCOMBOBOXINFO or GetComboBoxInfo() to get the list's HWND, and then send LB_SETCURSEL to it.
I'm working on an InfoPath 2007 form. I have two drop-down lists and i need the second to be populated with items bases on the value chosen in the first list. I use c# to populate the drop-dpwn lists from external sources. I've tried to use the OnChange event to make all this, but the second list is still empty.
If anyone knows, please tell me.
You can filter the entries for the second drop-down list based on your first list (but only if the entries are based on a data source, not manually entered).
Bring up the properties window for
your second drop-down list.
Select your data source.
Click on the button to the right of the Entries text box.
Select the repeating node you wish to use for the basis of your list entry.
Click the Filter Data button. From here you can enter a filter to limit the entries displayed based on the value of your first drop-down list.
Your question was a bit ambiguous. You may be trying to populate a secondary data source based off of your first drop-down list. This should work fine with an OnChange event. Can you post the code you are using to do this?
Some additional tips that may help:
The change event will not fire until focus moves off of the list box. So, for the second drop down to populate, you will need to set the first drop-down then hit tab or click elsewhere in the form.
I don't know the size or nature of the data source you are using for the second drop-down list, but you may consider downloading the entire data source and filter it using the method I described above. This may be a better solution as you won't need to make a database query between entering the first list box and the second one.
Ok, so I want an autocomplete dropdown with linkbuttons as selections. So, the user puts the cursor in the "text box" and is greated with a list of options. They can either start typing to narrow down the list, or select one of the options on the list. As soon as they click (or press enter) the dataset this is linked to will be filtered by the selection.
Ok, is this as easy as wrapping an AJAX autocomplete around a dropdown? No? (Please?)
This widget can be made with three items: a text input, button input, and an unordered list to hold the results.
__________ _
|__________||v|__ <-- text and button
| | <-- ul (styled to appear relative to text input)
| |
| |
|______________|
ul shown on:
'keyUp' event of the text input (if value is non-empty)
'click' event of the button input (if currently not visible)
ul hidden on:
'click' event of the button input (if currently visible)
'click' event of list items
When the ul is shown or the 'keyUp' event of the text input is triggered an AJAX call to the server needs to be made to update the list.
On success the results should be placed in the ul. When creating the list items they should have a 'click' event attached to them that sets the text input value and hides the ul (may have to add a link inside the li to attach the event to).
The hardest part is really the CSS. The JavaScript is simple especially with a solid library like prototype that supports multiple browsers.
You will probably want to support some IDs for the items, so you can add some hidden inputs to each list item with the id and next to the text input to store the selected items ID.
You'll have to handle the OnSelectedIndexChanged event of your drop down list to rebind your dataset based on the users selection. If you want the filtering to happen in an asynch postback, wrap the dataset (or datagrid I'm assuming) and your drop down in an UpdatePanel. That is one way to do it anyhow.
I am not entirely sure what you want, but the Ra-Ajax AutoCompleter definitely have support for having "controls" within itself. You can see that in the search box at Stacked in fact (upper right corner) where we're using links. But this could also be LinkButtons if you wish...
Disclaimer; I work with Ra-Ajax...
In my opinion, you shouldn't use AJAX for this at all.
here's why:
(1) On focus: ALL the options that he can select are shown in the dropdown. This means that all possible options are already sent to the client.
(2) If the user types something in, the number of entries in the drop down are filtered down to match. This can easily be done on the client side. Being ajax'y and going back to the server at this point will just slow things down.
phpguru.org has a control which is 'almost exactly' what you need:
http://www.phpguru.org/static/AutoComplete.html#demo
It differs slightly from what you need in that it shows the dropdown on double-click instead of on focus. That should be fairly easy to modify.
I hope this helps.