Select Option Custom Tag JQUERY

Hi umuayo,

I guess you want pass the jquery selector for textbox and selectbox. I have created a file named filterByText.cfm which will act as customtag for me.

for more information regarding custom tag follow this link http://help.adobe.com/en_US/ColdFusion/9.0/Developing/WSc3ff6d0ea77859461172e0811cbec0b2e1-7fff.html

In this example i have created custom tag in the same directory where I will use it. You can create it in different place also. Let us get into the main topic. I will pass the jquery selector for textbox and selectbox to the custom tag by "FilterId" and "slctcomm" attribute and inside customtag I will convert coldfusion valiable to javascript variable and use them to call your function.

dynamicselectbox.cfm

CODE:

<script src="http://code.jquery.com/jquery-latest.js"></script>

<cfquery name="getEmps" datasource="cfdocexamples">

    SELECT * FROM EMPLOYEE

</cfquery>

<div>Filter<br>

    <input id="txtcomm" type="text" name="">      

</div>

<div>

    <select id="slctcomm" multiple style="width:220px" class="selclass">

        <cfoutput query="getEmps">

            <option value="#Emp_ID#">#FirstName#</option>

        </cfoutput>

    </select>

          <select id="slctcomm2" multiple style="width:220px" class="selclass">

        <cfoutput query="getEmps">

            <option value="#Emp_ID#">#FirstName#</option>

        </cfoutput>

    </select>  

</div>

<cf_filterByText FilterId="##txtcomm" slctcomm=".selclass">

filterByText.cfm

Code:

<script type="text/javascript">

//get the jquery selector from attribute scope

          var filterId="<cfoutput>#Attributes.FilterId#</cfoutput>";

          var selectBoxId="<cfoutput>#Attributes.slctcomm#</cfoutput>";

    jQuery.fn.filterByText = function(txtcomm, selectSingleMatch) {

                    console.log(this);

                    var retvar;

        retvar = this.each(function() {

        var slctcomm = this;

        var options = [];

        $(slctcomm).find('option').each(function() {

          options.push({value: $(this).val(), text: $(this).text()});

        });

        $(slctcomm).data('options', options);

        $(txtcomm).bind('change keyup', function() {

          var options = $(slctcomm).empty().data('options');

          var search = $.trim($(this).val());

          var regex = new RegExp(search,'gi');

          $.each(options, function(i) {

            var option = options;

            if(option.text.match(regex) !== null) {

              $(slctcomm).append(

                 $('<option>').text(option.text).val(option.value)

              );

            }

          });

          if (selectSingleMatch === true &&

              $(slctcomm).children().length === 1) {

            $(slctcomm).children().get(0).selected = true;

          }

        });

      });

            return retvar;

    };

//call the function with the selector passed by user.

    $(function() {

      $(selectBoxId).filterByText($(filterId), true);

    });

</script>

Thanks

Saurav