Select Option Custom Tag JQUERY

[umuayo]

I have multiple select options on many of my pages, I just just added a jquery filter plugin to one of the select options i.e As User types on an input box the values in the select options gets filtered. This works very well now. How can I make it this into a custom Tag where it can be resused by all the select options on the site. That is the id of the select option and the input box has to be passed to the jquery to automtically filter the content of the Select Option. below is my jquery script.

<div>Filter<br>

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

</div>

<div>

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

        <cfloop query="qryobjComm">

            <option value="#Comm#">#Comm#</option>

        </cfloop>

    </select>   

</div> 

<script>

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

      return 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;

          }

        });

      });

    };

    $(function() {

      $('#slctcomm').filterByText($('#txtcomm'), true);

    });

</script>

[saurav Pandit]

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