Is it possible to use the ComboList filtering option but instead of it removing the list of options that it keeps them and just moves to the highlighted option?
I’m not sure how to implement the options that you’re example has. This is my test code that straight from your examples.
var z = dhtmlXComboFromSelect(“company”);
z.enableFilteringMode(true);
z.attachEvent(“onChange”, onChangeFunc);
Now if I add the following lines it doesn’t seem to change the affect that I currently get. It filters the list still but erases all of the other options until I clear out (or backspace) the combobox.
z.setComboText(“company”);
z.filterSelf();
If I use the following it leaves the list up but doesn’t highlight the selection until it’s fully typed. I was thinking that the filtering would still function and highlight the closest selection and continue to narrow it down but just not delete the list of options.
var z = dhtmlXComboFromSelect(“company”);
//z.enableFilteringMode(true);
z.attachEvent(“onChange”, onChangeFunc);
z.setComboText("");
z.filterSelf(true);
filterSelf() filters the list by the text in combo header. So, the following shows all option
z.setComboText("");
z.filterSelf();
I am going to join the conversation here. Alexandra, reading his post and the one that I made. That does not produce the result I would like. And I think is the same for this poster.
What the code you provide does is blank out the original answer and then displays the entire list.
And what atleast I was looking for is that they hit the arrow key… The orginal option is still there maintaing value and it is highlighted and shown in a list of all the options.
So Answer is Red
Combobox = Red
User hits arrow or box
Shows the list of colors
Maintains value of Red
but shows the entire list
Black
Blue
Green
Red <-----------is highlighted.
Yellow
White
But Researching some your filtering is not working that way. The way the filtering of your combobox is working is a search and then display the results. Which is one way to do it.
Combobox Red
will show only no other answers.
Red <—highlighted
I was looking for a search and it highlighting the closest match in an already existant list with items before and after it.
Searching box is Re
Combobox shows
Black
Blue
Green
Red <-----------is highlighted.
Yellow
White
Hope that makes it more clear… But Am I right in assuming there is no way to get this functionality through settings?
Basically it comes down to different scenarios two editing and one looking.
Scenario #1 A user enters into the web page. Needs to change a combo. They have to goto it and wipe out there answer to either start typing or to preview existing list. Your solution would work for this scenario
Scenario #2 A user is editing accidently hits the arrow/textbox, if we did your solution the value will be blown out.
Scenario #3 a user comes in wants to review the selections that someone used, so they want to see what their options are. if we did your solution the value will be blown out. And if they deleted the text they loose their value. We have Quality Information process and for us this could happen.
For me I have lists that can be anywhere from 2-300. For me I need a combobox because items in the Text answer in list are really long in certain scenarios and since I am programming something to meet federal guidelines I can redo the answer text that they can select.
I really am wanting to be able to use your controls because they have a lighter foot print than telerik or infragistics or devexpress. I really don’t need all their features.
But I am finding limitations that I would not have in you competitors.
This is what I wounde up doing producing almost the result I want…
function ComboMouseUp(ComboId) {
return function () {
window.setTimeout(function () {
var SelectedText = ComboList[ComboId].getSelectedText();
var SelectedValue = ComboList[ComboId].getSelectedValue();
//alert(SelectedText); alert(SelectedValue);
ComboList[ComboId].setComboText("");
ComboList[ComboId].filterSelf();
ComboList[ComboId].setComboText(SelectedText);
ComboList[ComboId].setComboValue(SelectedValue);
setCursorPosition(ComboList[ComboId].DOMelem_input, ComboList[ComboId].DOMelem_input.length-1);
}, 1);
}
}
function setCursorPosition(ctrl, pos) {
if (ctrl.setSelectionRange) {
ctrl.focus();
ctrl.setSelectionRange(pos, pos);
}
else if (ctrl.createTextRange) {
var range = ctrl.createTextRange();
range.collapse(true);
range.moveEnd('character', pos);
range.moveStart('character', pos);
range.select();
}
}
z = dhtmlXComboFromSelect("<%# ddlMedDirComp.ClientID %>");
z.DOMelem.onmouseup = ComboMouseUp("<%# ddlMedDirComp.ClientID %>");
ComboList["<%# ddlContactType.ClientID %>"] = z;problem being is the setCursosPosition is having no effect. When I run that method. It will put the cursor position at the beginning of the text.
It also doesn’t help if someone wants to delete a character or multiple characters from the original search string as when someone miss types.
Ideas are appreciated…
So this is what I came up with, for anyone else interested.
Alexandra, if I am doing it a hard way please let me know.
function GetCursorPos(oField) {
// Initialize
var iCursorPos = 0;
// IE Support
if (document.selection) {
// Set focus on the element
oField.focus();
// To get cursor position, get empty selection range
var oSel = document.selection.createRange();
// Move selection start to 0 position
oSel.moveStart('character', -oField.value.length);
// The curso position is selection length
iCursorPos = oSel.text.length;
}
// Firefox support
else if (oField.selectionStart || oField.selectionStart == '0')
iCursorPos = oField.selectionStart;
// Return results
return iCursorPos;
}
function SetCursorPos(oField, iCursorPos, iSelEndPos) {
// IE Support
if (document.selection) {
// Set focus on the element
oField.focus();
// Create empty selection range
var oSel = document.selection.createRange();
// Move selection start and end to 0 position
oSel.moveStart('character', -oField.value.length);
// Move selection start and end to desired position
oSel.moveStart('character', iCursorPos);
oSel.moveEnd('character', (iSelEndPos != 0 ? (iSelEndPos - iCursorPos) : 0));
oSel.select();
}
// Firefox support
else if (oField.selectionStart || oField.selectionStart == '0') {
oField.selectionStart = iCursorPos;
oField.selectionEnd = (iSelEndPos == 0 ? iCursorPos : iSelEndPos);
oField.focus();
}
}
function GetTextSelectedPos(oField) {
var Pos = {Start:0, End:0, Text:''}
if (window.getSelection) {
Pos.Text = window.getSelection();
}
else if (document.getSelection) {
Pos.Text = document.getSelection();
}
else if (document.selection) {
Pos.Text = document.selection.createRange().text;
}
if (Pos.Text!="") {
Pos.Start = oField.value.indexOf(Pos.Text);
Pos.End = Pos.Start + Pos.Text.length;
}
return Pos;
}
function ComboMouseUp(ComboId) {
return function () {
window.setTimeout(function () {
//get current position of cursor (some call it caret)
var CursorPosition = GetCursorPos(ComboList[ComboId].DOMelem_input);
//get start and end position of highlighted text
var Pos = GetTextSelectedPos(ComboList[ComboId].DOMelem_input);
//store value and text of current selection
var SelectedText = ComboList[ComboId].getSelectedText();
var SelectedValue = ComboList[ComboId].getSelectedValue();
//force blank search
ComboList[ComboId].setComboText("");
ComboList[ComboId].filterSelf();
//reset back to the orginal selected text and value before forced filtering.
ComboList[ComboId].setComboText(SelectedText);
ComboList[ComboId].setComboValue(SelectedValue);
//reset cursor position or highlighted text
if (Pos.Text == "")
SetCursorPos(ComboList[ComboId].DOMelem_input, CursorPosition, 0);
else
SetCursorPos(ComboList[ComboId].DOMelem_input, Pos.Start, Pos.End);
}, 1);
}
}
//declaration and initializing of combobox.
z = dhtmlXComboFromSelect("<%# ddlContactType.ClientID %>");
z.enableFilteringMode(true);
z.DOMelem.onmouseup = ComboMouseUp("<%# ddlContactType.ClientID %>");The highlighting though does not work with Firefox. The Get window.getSelection().toString() is returning a blank. Apparently a FF bug.
Works in IE, Safari and Chrome