这种ComBox效果如何实现？

cwbboy 2003-07-31 06:21:19

http://www.ycode.com/ComboBox/Latest/combo_box_simple.htm

我实现的效果没这个好，请教一下

...全文

118 21 打赏收藏转发到动态举报

写回复

用AI写文章

21 条回复

切换为时间正序

请发表友善的回复…

发表回复

fason 2003-08-01

打赏
举报

Note: it can run on IE5.5, 6.0, and later browsers only.) 可惜

fason 2003-08-01

打赏
举报

Note: it can run on IE5.5, 6.0, and later browsers only.) 可惜

flyycyu 2003-08-01

打赏
举报

我的文党里面就有这个，当初也是看ycode的！

龙威 2003-08-01

打赏
举报

我的放到

http://ljcao.hnit.aosee.com/combox/

上了，需要的同志自己去下载吧！

cwbboy 2003-07-31

打赏
举报

真时复杂啊

龙威 2003-07-31

打赏
举报

龙威 2003-07-31

打赏
举报

龙威 2003-07-31

打赏
举报

//============================================================
//deleteValue() -- deletes the value from the combo box; if the
// argument is not present or is empty, deletes the current combo
// box value.
//------------------------------------------------------------
function deleteOption( sText )
{
if ( (sText == null) || (sText == "") ) {
if ( oTextBox.value == "" ) {
return false;
}
sText = oTextBox.value;
}

var iLen = oSelectBox.options.length;
var iIndex;
var iFound = -1;
var sOptionText;

if (case_sensitive == false) {
sText = sText.toUpperCase();
}

for (iIndex=0; iIndex<iLen; iIndex++)
{
sOptionText = oSelectBox.options(iIndex).text;

if (case_sensitive == false) {
sOptionText = sOptionText.toUpperCase();
}
if ( sOptionText == sText)
{
iFound = iIndex;
break;
}
}

if (iFound == -1)
{
return false;
}
oSelectBox.remove(iFound);
oSelectBox.selectedIndex = -1;
oTextBox.value = "";

fireTextChange();
fireSelectionChange( -1 );
return true;
}

function deleteOptionIndex( iOptionIndex )
{
var iLen = oSelectBox.options.length;

if ( !isInteger( iOptionIndex ) ) {
return false;
}
if ( ( iOptionIndex < 0 ) || ( iOptionIndex >= iLen ) ) {
return false;
}
oSelectBox.remove(iOptionIndex);
oSelectBox.selectedIndex = -1;
oTextBox.value = "";

fireTextChange();
fireSelectionChange( -1 );
return true;
}

function resetList()
{
var bWasSelected = ( oSelectBox.selectedIndex > -1 );
var bWasText = ( oTextBox.value != "" );

var iLen = oSelectBox.options.length;
var iIndex;

oSelectBox.options.length = 0;
oTextBox.value = "";
oSelectBox.selectedIndex = -1;

if ( bWasText ) {
fireTextChange();
}
if ( bWasSelected ) {
fireSelectionChange( -1 );
}
}

function findText( sText, bExact )
{
if ( (sText == null) || (sText == "") ) {
if ( oTextBox.value == "" ) {
return false;
}
sText = oTextBox.value;
}
if ( bExact == null ) {
bExact = false;
}
if (case_sensitive == false) {
sText = sText.toUpperCase();
}
var iLen = oSelectBox.options.length;
var iIndex;
var sCurrentText;
var bFound;

for (iIndex=0; iIndex<iLen; iIndex++)
{
sCurrentText = oSelectBox.options[ iIndex ].text;
if (case_sensitive == false) {
sCurrentText = sCurrentText.toUpperCase();
}
bFound = bExact ? ( sText == sCurrentText ) : (sCurrentText.indexOf(sText) == 0);

if ( bFound ) {
return iIndex;
}
}
return -1;
}

function selectText( sText, bExact )
{
return setSelectedIndex( findText( sText, bExact ) );
}

/********************************************************************
**************************EXPOSED EVENTS****************************
********************************************************************/

function onChangeListSelection()
{
var iSelected = oSelectBox.selectedIndex;
var oSelected = oSelectBox.options[iSelected];

oTextBox.value = oSelected.text;
oTextBox.focus();
oTextBox.select();

fireSelectionChange( iSelected );
}

function onChangeEditText()
{
if (oTextBox.value == "") {
return;
}

var iIndex;
var iLen = oSelectBox.options.length;
var sEditText = oTextBox.value;
var sListText;
var bFound = false;

// Select list item which text is equal to text box value
for (iIndex=0; iIndex<iLen; iIndex++)
{
sListText = oSelectBox.options(iIndex).text;

if (case_sensitive == false)
{
sListText = sListText.toUpperCase();
sEditText = sEditText.toUpperCase();
}

if (sListText == sEditText)
{
oSelectBox.selectedIndex = iIndex;
bFound = true;
break;
}
}

// warn user if only list entries are allowed
if ( !bFound ) {
if ( options_only == true ) {
error("'" + oTextBox.value + "' is not allowed");
oTextBox.focus();
oTextBox.select();
return;
}
oSelectBox.selectedIndex = -1;
}

fireTextChange();
fireSelectionChange( oSelectBox.selectedIndex );
}

cwbboy 2003-07-31

打赏
举报

to：ljcao(龙威)

能不能分析分析啊

cwbboy 2003-07-31

打赏
举报

这里果然高手多啊。。

龙威 2003-07-31

打赏
举报

//============================================================
//addValue() -- adds a value to the combo box; if the argument
// is not present or is empty, adds the current combo box value.
// iInsertIndex - insertion index; if none is given:
// if list is not sorted, places the option to the end of options array.
// if list is sorted, places into appropriate position
//------------------------------------------------------------
function addOption( sText, sValue, iInsertIndex )
{
if ( (sText == null) || (sText == "") ) {
if ( oTextBox.value == "" ) {
return -1;
}
sText = oTextBox.value;
}

if ( !isInteger( iInsertIndex ) ) {
iInsertIndex = null;
}

var iLen = oSelectBox.options.length;
if ( ( iInsertIndex < 0 ) || ( iInsertIndex > iLen ) ) {
iInsertIndex = null;
}

var bSort = false;

// Ignore insertion index if list is sorted
if ( cSortOrder != "" ) {
iInsertIndex = null;
bSort = true;
}

var iIndex;
var bExists = false;
var sOptionText, sOptionTextUpper;
var sTextUpper = sText;

if (case_sensitive == false) {
sTextUpper = sTextUpper.toUpperCase();
}

//check for duplicates and return if a duplicate exists
for (iIndex=0; iIndex<iLen; iIndex++)
{
sOptionTextUpper = sOptionText = oSelectBox.options(iIndex).text;

if (case_sensitive == false) {
sOptionTextUpper = sOptionTextUpper.toUpperCase();
}

if ( sOptionTextUpper == sTextUpper )
{
oSelectBox.selectedIndex = iIndex;
sText = sOptionText;
bExists = true;
break;
}

// if list is sorted, figure out insertion point
if ( bSort ) {
if ( iInsertIndex != null ) {
continue; // insertion index already found
}
if ( cSortOrder == "a" ) {
if ( sText < sOptionText ) {
iInsertIndex = iIndex;
}
}
else {
if ( sText > sOptionText ) {
iInsertIndex = iIndex;
}
}
}
}

if ( !bExists ) {
var oOption = document.createElement("OPTION");
oOption.text = sText;
oOption.value = sValue;

if ( iInsertIndex == null ) {
oSelectBox.add(oOption ); // place at the end
oSelectBox.selectedIndex = iLen;
}
else {
oSelectBox.add(oOption, iInsertIndex);
oSelectBox.selectedIndex = iInsertIndex;
}
}
oTextBox.value = sText;
oTextBox.select();
oTextBox.focus();

fireTextChange();
fireSelectionChange( oSelectBox.selectedIndex );
return oSelectBox.selectedIndex;
}

龙威 2003-07-31

打赏
举报

/*
* iDefaultMode: 0 - text, 1 - index, 2 - value; default = text
*/
function initOptions( asInitialOptions, asInitialValues, sDefaultText, iDefaultMode )
{
if ( asInitialOptions == null ) {
return;
}

// sort options array appropriately
if ( sort_order != "" ) {
asInitialOptions.sort();
if ( sort_order != "a" ) {
asInitialOptions.reverse();
}
}

var iLen = asInitialOptions.length;
var iInd;

if ( iDefaultMode == null ) {
iDefaultMode = 0;
}
if ( ( iDefaultMode == 1 ) && !isInteger( sDefaultText ) ) {
iDefaultMode = 0;
}

var bSelectOption = ( sDefaultText != null );

for ( iInd = 0; iInd < iLen; iInd++ ) {
var oOption = document.createElement("OPTION");
var sOptionText = asInitialOptions[ iInd ];
var sOptionValue = ( asInitialValues != null ) ? asInitialValues[ iInd ] : "";

oOption.text = sOptionText;
oOption.value = sOptionValue;
oSelectBox.add(oOption);

if ( bSelectOption ) {
if ( ( iDefaultMode == 0 ) && ( sOptionText == sDefaultText ) ) {
oSelectBox.selectedIndex = iInd;
oTextBox.value = sOptionText;
}
if ( ( iDefaultMode == 2 ) && ( sOptionValue == sDefaultText ) ) {
oSelectBox.selectedIndex = iInd;
oTextBox.value = sOptionText;
}
}
}

if ( bSelectOption && ( iDefaultMode == 1 ) ) {
var iIndex = parseInt( sDefaultText, 10 );

if ( ( iIndex <= iLen ) || ( iIndex < 0 ) ) {
oSelectBox.selectedIndex = -1;
oTextBox.value = "";
}
else {
oSelectBox.selectedIndex = iIndex;
oTextBox.value = oSelectBox.options[ iIndex ].text;
}
}

if ( !bSelectOption ) {
oSelectBox.selectedIndex = -1;
oTextBox.value = "";
}
oTextBox.focus();
oTextBox.select();

if ( bSelectOption ) {
fireTextChange();
fireSelectionChange( oSelectBox.selectedIndex );
}
}

/********************************************************************
**************************METHODS***********************************
********************************************************************/

function getOptionCount()
{
return oSelectBox.options.length;
}

function getSelectedIndex()
{
return oSelectBox.selectedIndex;
}

function setSelectedIndex( iSelectedIndex )
{
if ( !isInteger( iSelectedIndex ) ) {
return -1;
}

var iLen = oSelectBox.options.length;
if ( ( iSelectedIndex < 0 ) || ( iSelectedIndex >= iLen ) ) {
return -1;
}
oSelectBox.selectedIndex = iSelectedIndex;

oTextBox.value = oSelectBox.options[ iSelectedIndex ].text;
oTextBox.focus();
oTextBox.select();

fireTextChange();
fireSelectionChange( iSelectedIndex );
return iSelectedIndex;
}

function getOptionValue( iIndex )
{
if ( !isInteger( iIndex ) ) {
return "Error";
}

var iLen = oSelectBox.options.length;
if ( ( iIndex < 0 ) || ( iIndex >= iLen ) ) {
return "Error";
}
return oSelectBox.options[ iIndex ].value;
}

function setOptionValue( iIndex, sValue )
{
if ( !isInteger( iIndex ) ) {
return -1;
}

var iLen = oSelectBox.options.length;
if ( ( iIndex < 0 ) || ( iIndex >= iLen ) ) {
return -1;
}
oSelectBox.options[ iIndex ].value = sValue;
return iIndex;
}

function clearText()
{
oSelectBox.selectedIndex = -1;
oTextBox.value = "";
oTextBox.focus();
oTextBox.select();

fireTextChange();
fireSelectionChange( -1 );
}

function getText()
{
return oTextBox.value;
}

function setText( sText )
{
var sSavedText = oTextBox.value; // remember the previous value

oTextBox.value = sText;
onChangeEditText(); // select matching option

// If an option is selected, select text in text control
if ( oSelectBox.selectedIndex > -1 ) {
oTextBox.focus();
oTextBox.select();
}
else if ( options_only == true ) {
oTextBox.value = sSavedText; // if only options are allowed, don't change text control
oTextBox.focus();
oTextBox.select();
}
}

function getOptionText( iIndex )
{
if ( !isInteger( iIndex ) ) {
return "";
}

var iLen = oSelectBox.options.length;
if ( ( iIndex < 0 ) || ( iIndex >= iLen ) ) {
return "";
}
return oSelectBox.options[ iIndex ].text;
}

龙威 2003-07-31

打赏
举报

yCodeComboBox.js
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
/*
* Copyright Notice.
* This code was originally created by yCode: http://www.yCode.com
* Any modifications to this code can only be made upon purchase from
* yCode provided that this notice remains in the source code.
*
*/

document.write("<PUBLIC:COMPONENT tagName='COMBOBOX'>");
document.write("<PUBLIC:property name='oSelectBox' />");
document.write("<PUBLIC:property name='oTextBox' />");
document.write("<PUBLIC:attach event='ondocumentready' handler='initComboBox' />");

document.write("<PUBLIC:METHOD NAME='initOptions' />");

document.write("<PUBLIC:METHOD NAME='getOptionCount' />");
document.write("<PUBLIC:METHOD NAME='getSelectedIndex' />");
document.write("<PUBLIC:METHOD NAME='setSelectedIndex' />");
document.write("<PUBLIC:METHOD NAME='getOptionValue' />");
document.write("<PUBLIC:METHOD NAME='setOptionValue' />");
document.write("<PUBLIC:METHOD NAME='clearText' />");
document.write("<PUBLIC:METHOD NAME='getText' />");
document.write("<PUBLIC:METHOD NAME='setText' />");
document.write("<PUBLIC:METHOD NAME='getOptionText' />");
document.write("<PUBLIC:METHOD NAME='addOption' />");
document.write("<PUBLIC:METHOD NAME='deleteOption' />");
document.write("<PUBLIC:METHOD NAME='deleteOptionIndex' />");
document.write("<PUBLIC:METHOD NAME='resetList' />");
document.write("<PUBLIC:METHOD NAME='findText' />");
document.write("<PUBLIC:METHOD NAME='selectText' />");

document.write("<PUBLIC:EVENT NAME = 'cb_onselectionchanged' ID='event_selectionchanged'/>");
document.write("<PUBLIC:EVENT NAME = 'cb_ontextchanged' ID='event_textchanged'/>");
document.write("<PUBLIC:EVENT NAME = 'cb_onkeyup' ID='event_textkeyup'/>");
document.write("<PUBLIC:EVENT NAME = 'cb_onkeydown' ID='event_textkeydown'/>");
document.write("<PUBLIC:EVENT NAME = 'cb_onkeypress' ID='event_textkeypress'/>");

document.write("<PUBLIC:property name='lookup_options'/>");
document.write("<PUBLIC:property name='case_sensitive'/>");
document.write("<PUBLIC:property name='options_only' />");
document.write("<PUBLIC:property name='sort_order' id='propid_sort' put='sortList' get='getSortOrder' />");
document.write("<PUBLIC:property name='max_text_length' id='propid_maxtextlen' put='limitTextLength' />");
document.write("<PUBLIC:property name='submit_text' id='propid_submittext' put='changeSubmitProp' />");

document.write("<PUBLIC:property name='tables' />");

document.write("</PUBLIC:COMPONENT>");

var cSortOrder = "";

function initComboBox() {
var iBrowserVersion = checkBrowser();
if ( iBrowserVersion == 0 ) {
alert("This page may not be displayed properly:\n\
This product requires Microsoft Internet Explorer 5 or later browser only.");
}

innerHTML = "<SPAN><INPUT /><SELECT>" + innerHTML + "</SELECT></SPAN>";
var oSpan = children( 0 );

oTextBox = oSpan.children( 0 );
oTextBox.id = uniqueID + "_text";
oTextBox.name = name + "_text";

oTextBox.attachEvent("onchange",onChangeEditText);
oTextBox.attachEvent("onkeyup",onEditKeyUp);
oTextBox.attachEvent("onkeydown",onEditKeyDown);
oTextBox.attachEvent("onkeypress",onEditKeyPress);
oTextBox.attachEvent("onblur",onEditBlur);

oSelectBox = oSpan.children( 1 );
oSelectBox.id = uniqueID + "_select";
oSelectBox.name = name + "_select";
oSelectBox.tabIndex = -1;

oSelectBox.calculate_absolute_X=calculate_absolute_X;
oSelectBox.calculate_absolute_Y=calculate_absolute_Y;

oSelectBox.style.position = "absolute";
oSelectBox.style.setExpression("pixelLeft", "calculate_absolute_X(" + oTextBox.id + ")");
oSelectBox.style.setExpression("pixelTop", "calculate_absolute_Y(" + oTextBox.id + ")");
//oSelectBox.style.setExpression("pixelWidth", id + ".offsetWidth" );
//oSelectBox.style.setExpression("pixelHeight", id + ".offsetHeight");

if ( iBrowserVersion == 6 ) {
oSelectBox.style.setExpression("clip","'rect(auto auto auto '+(offsetWidth - 18)+')'");
}
else {
oSelectBox.style.setExpression("clip","'rect(auto auto auto '+(offsetWidth - 20)+')'");
}

var iWidth = getAttribute( "width" );
if ( ( iWidth != null ) && ( iWidth != "" ) ) {
oSelectBox.style.pixelWidth = iWidth;
}

oTextBox.style.setExpression("pixelWidth", oSelectBox.id + ".offsetWidth - 18" );
oSpan.style.setExpression("pixelWidth", oSelectBox.id + ".offsetWidth" );

oSelectBox.attachEvent("onchange", onChangeListSelection);

/*
* Supported styles: background color, color, font, letter-spacing, margin, text-align
*/
var sProperty;
var sPropertyValue;

sPropertyValue = style.getAttribute("backgroundColor");
if ( ( sPropertyValue != null ) && ( sPropertyValue != "" ) ) {
oTextBox.style.setAttribute("backgroundColor", sPropertyValue );
oSelectBox.style.setAttribute("backgroundColor", sPropertyValue );
}
sPropertyValue = style.getAttribute("color");
if ( ( sPropertyValue != null ) && ( sPropertyValue != "" ) ) {
oTextBox.style.setAttribute("color", sPropertyValue );
oSelectBox.style.setAttribute("color", sPropertyValue );
}

sPropertyValue = style.getAttribute("font");
if ( ( sPropertyValue != null ) && ( sPropertyValue != "" ) ) {
oTextBox.style.setAttribute("font", sPropertyValue );
oSelectBox.style.setAttribute("font", sPropertyValue );
}

sPropertyValue = style.getAttribute("letterSpacing");
if ( ( sPropertyValue != null ) && ( sPropertyValue != "" ) ) {
oTextBox.style.setAttribute("letterSpacing", sPropertyValue );
oSelectBox.style.setAttribute("letterSpacing", sPropertyValue );
}

sPropertyValue = style.getAttribute("textAlign");
if ( ( sPropertyValue != null ) && ( sPropertyValue != "" ) ) {
oTextBox.style.setAttribute("textAlign", sPropertyValue );
oSelectBox.style.setAttribute("textAlign", sPropertyValue );
}

attachEvent( "onpropertychange", changeStyle );
/*
if ( currentStyle.width != "auto") {
}
*/

/*
* Do not sort list for performance reasons; options should be provided in appropriate order
*
if ( element.sort_order != "" ) {
sortList();
}
*/

// If element is intialized with options, insert appropriate text into edit box
var iSelected = oSelectBox.selectedIndex;
if ( iSelected > -1 ) {
oTextBox.value = oSelectBox.options[ iSelected ].text;
fireTextChange();
}

if ( ( currentStyle.visibility == "visible" ) && ( currentSTyle.display != "none" ) ) { // if control is visible
oTextBox.select();
oTextBox.focus();
}

lookup_options = true;
case_sensitive = false;
options_only = false;
sort_order = "";
max_text_length = "";
tables = 0;
}

cwbboy 2003-07-31

打赏
举报

to ljcao(龙威)

他还有关键的js文件啊

龙威 2003-07-31

打赏
举报

combobox.htc
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
/*
* Copyright Notice.
* This code was originally created by yCode: http://www.yCode.com
* Any modifications to this code can only be made upon purchase from
* yCode provided that this notice remains in the source code.
*
*/

<SCRIPT language='JScript.Encode' src='yCodeComboBox.js'>
</SCRIPT>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

龙威 2003-07-31

打赏
举报

已经破解

combo_box_simple.htm
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<HTML xmlns:yCode>
<HEAD>
<script language = JScript.Encode>
document.write("<STYLE>");
document.write("yCode\\:combobox {behavior: url(combobox.htc); }");
document.write("</STYLE>");
</script>

<title>Combo Box Simple Demo</title>
</HEAD>

<META NAME="Keywords" CONTENT="JavaScript, DHTML, Combo Box, ComboBox,
Controls, Intranet, yCode, yCode.com">

<META NAME="description" CONTENT="yCode Combo Box v2.0 acts and
feels like a regular windows combo box where you can enter a value directly
or select one from a drop down list. The Combo Box is implemented as an HTC component
in JavaScript and can be easily included in any html page.">

<body>

<p><a href="http:\\www.yCode.com" target="_top">yCode Home</a>
<a href="combobox_test.htm">Combo-box Advanced Example<a>
</p>

<font face="Helvetica">
<p>
<b>yCode Combo Box</b> v2.0 provides functionality similar to a Windows combo-box.
Combo-box consists of a SELECT box combined with INPUT TEXT control. The SELECT box portion
of the control drops down when the user clicks the drop-down arrow next to the control.
Currently selected item (if any) in the SELECT box is displayed in the TEXT control.
In addition, the user can enter text directly into the TEXT control.
<br><br>
The Combo Box is implemented as an HTC component in JavaScript and can be easily
included in any html page.

</p>
<p>
There are many situations where a combo box is useful. One example is
entering an email address: you may select one from the SELECT box
or just type one in.
</p>

<p>
So, give it a try! (<b>Note:</b> it can run on <b>IE5.5, 6.0,</b> and later browsers only.)
</p>
<p>
Please enter email address:
<script language = JScript.Encode>
document.write("<yCode:COMBOBOX ID='my_combobox' name='my_combobox'>");
document.write("<option value='info@mycompany.com'>info@mycompany.com</option>");
document.write("<option value='support@mycompany.com'>support@mycompany.com</option>");
document.write("<option value='sales@mycompany.com'>sales@mycompany.com</option>");
document.write("</yCode:COMBOBOX>");
</script>

<input ID="btn_retreive" type="button" name="retrieve" value="Retrieve Selection"
onclick="alert('Combo Box value is \'' + my_combobox.getText() + '\'');">
</p>

Programmer controls:
<ul>
<li>Whether entries in the SELECT box are sorted</li>
<li>Whether values not existing in the SELECT box are allowed to be typed in</li>
<li>Whether values that already exist in the SELECT box are looked up as the user types data in</li>
<li>Whether above options are case-sensitive</li>
<li>Length of user's input</li>
<li>Styles, such as text color, backround color, font, and more</li>
<li>Values can be added to or deleted from the Combo Box</li>
<li>Both the selected text string and a corresponding SELECT box value can be retrieved and/or posted by a form</li>

</ul>
Please follow the link to view a more <a href="combobox_test.htm"><b>Advanced Example</b><a>. It demonstrates all
combo-box functions and properties in action.
</p>
<p>
Other functionality can be added upon request. Please contact
<a href="mailto:sales@yCode.com">sales@yCode.com</a> for more information.
</p>

<p>
<b>Note:</b> the source code for this page is <a href="http:\\www.yCode.com/yCode/copyright.html">copyrighted<a>.
</p>

<p>
Please follow the link to
<a href="http:\\www.yCode.com\ComboBox\buy_combo_frameset.htm" target="_top"><b>BUY</b></a>
the source code and intranet license for $25 (USD)<br>
(Purchase securely through <a href="http:\\www.ibill.com" target="_blank">ibill</a>, our authorized sales agent).
</p>
</font>

</body>
</html>

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

kingdomzhf 2003-07-31