Sunday, July 11, 2010

JavaScript Single Select Question?

All,





In my HTML I have a single select box that has a viewport of 10 elements. I have a input box underneath it where in they can type a string which would be looked up in the options of the select control. The requirement is that the matching option should be in the viewport. I achieved this by selecting the option matching the text which makes the scroll bar scroll to that option.





Another requirement is that when the user selects a option from this single select list, I have to go and fetch some data from server (ajax) and present in a second combo box. I had no problem in doing that when the user clicks on the option but if the user types in a string in the input box the selection ogic described above selects an option but the second combox box is empty.





My question is how to scroll to programtically scroll to a particular element with out selecting the element in a single select list?





TIA

JavaScript Single Select Question?
EDIT





Ah, that's much clearer, thank you, so you do not actually make a submission upon text entry.





Setting selected is the only available thing you can do - if you want to highlight more than one option you could always set the select property multiple. This can still work because the parsing of the selected items is totally up to you.





This is a rough draft because I haven't seen any of your code:





For example





%26lt;select id=location multiple name=location onclick="send(this)"%26gt;


%26lt;option value="1"%26gt;One


%26lt;option value="2"%26gt;Two


%26lt;option value="3"%26gt;Three


%26lt;option value="4"%26gt;Four


%26lt;/select%26gt;





%26lt;input type=text%26gt;


%26lt;input type=button value="Match" onclick="match()"%26gt;





%26lt;script language=javascript%26gt;


function send(select) {


alert( select.options[ select.selectedIndex].value);


}





function match() {


var select = document.getElementById( 'location');


for(i=0; i%26lt; select.options.length; i++) {


select.options[i].selected = false;


}


select.options[2].selected = true;


select.options[3].selected = true;


}


%26lt;/script%26gt;





So, only the last selected option is shown in the alert box - analagous to your server fetch.


The setting of the options to selected obviously depends on the result of your match.





Also, if the text matches more than one option, they are highlighted but no server fetch is triggered because the trigger is onlick not onchange. If you want to do a server fetch then this can be modified to do so by using onchange.





I hope this is close but seeing some of your code would really help.























This sounds like a search engine I did a while back.





Basically a search engine with select box(es) and an optional text input for manual search. The results of either cause a query to the server which results in a presentation in a separate frame.





The difference is that I didn't link the text input(manual search)with the select box (automatic search) because there was no need.





The text input had a submit button and caused a direct query to the server.


A click on the select options also caused a direct query to the server.


The format was identical so the results were identical.





So I would make the text input inderneath the select box independently query the server in the same format as the select box - that way you will get a result in your separate combo box.





So the best way to achieve this is to actually call the text input name exactly the same as the select box. Make sure it sends same hidden parameters so that the query looks identical.That way the server won't know the difference and send back results to your combo box.





Hope this helps.


No comments:

Post a Comment