Integrate two javascript scripts and handle user events differently
<p>I am building a search form that use two different javascript scripts. This is the form code:</p>

<pre><code>$(function()
{
  $('#txtSearch').chainSelect('#link_id','http://localhost/xxx.com/combobox.php',
  { 
     before:function (target) //before request hide the target combobox and display the loading message
  {  
    $("#loading").css("display","block");
    $(target).css("display","inline");
 },
    after:function (target) //after request show the target combobox and hide the loading message
 { 
     $("#loading").css("display","none");
     $(target).css("display","inline");
     }
   });
  });
// form code
&lt;td&gt;&lt;div&gt;&lt;input type="text" id="txtSearch" name="cat_name" onkeyup="searchSuggest();" autocomplete="off" class="inputbox ajax" value="" /&gt;&lt;/div&gt;&lt;/td&gt;
&lt;td&gt;&lt;div&gt;&lt;select name="link_id" id="link_id" class="inputbox select"&gt;&lt;option value=""&gt;All Courses&lt;/option&gt;&lt;/select&gt;&lt;/div&gt;
</code></pre>

<p>The first input uses an Ajax suggest type of behavior that pulls a list of categories from the database (with php) when the user starts to type. The users clicks on one of the cats and the input is filled with the clicked text. Next is a select list of courses that is also pulled from the database when the user chooses the first input.</p>

<p>This is part of the Ajax code - in 1 external file:  </p>

<pre><code> function handleSearchSuggest() {
    if (searchReq.readyState == 4) {
       var ss = document.getElementById('search_suggest')
       ss.innerHTML = '';
       var str = searchReq.responseText.split("\n");
       for(i=0; i &lt; str.length - 1; i++) {
      //Build our element string.  This is cleaner using the DOM, but
      //IE doesn't support dynamically added attributes.
      var suggest = '&lt;div onmouseover="javascript:suggestOver(this);" ';
      suggest += 'onmouseout="javascript:suggestOut(this);" ';
      suggest += 'onclick="javascript:setSearch(this.innerHTML);" ';
      suggest += 'class="suggest_link" id="suggestTrigger"&gt;' + str[i] + '&lt;/div&gt;';
      ss.innerHTML += suggest;
    }
  }
 }
    //Click function
    function setSearch(value) {
      document.getElementById('txtSearch').value = value;
      document.getElementById('search_suggest').innerHTML = '';
    }
</code></pre>

<p>It creates a div that is filled with the cat names.</p>

<p>The relevant select list jquery code is this - in a 2nd external file:</p>

<pre><code>    jQuery.fn.chainSelect = function( target, url, settings ) 
    {
      return this.each( function()
      {
        $(this).change( function( ) 
        {
           // more code here
        });
     });
   };
</code></pre>

<p>As you can see the select list is pulled from the database in case of a change event. This is not working well at the moment since the user clicks in the div and does not create a change the input text really. The event that should trigger the select is the onclick of the div of the suggest box. But it already has a function called setSearch(). How do I activate the jquery function on the onclick event of the div suggest box (in the ajax code) instead of on the change event of the suggest input box (#txtSearch) as it is now?</p>
