Problem with javascript function while using Jquery
<p>I am very new to Javascript and have only started playing with jquery recently. I have a Javascript function that while used on its own within my project, works flawlessly. as below.. * UPDATE * these 2 functions are declared after the <code>&lt;input&gt;</code> tag and still throw the same error <code>document.getElementById("name_first") is null</code> <strong>when i add the jquery code.</strong></p>

<pre><code>&lt;script type="text/javascript"&gt;

function printSymbol(symbol) {  document.getElementById('name_first').value
+= symbol; };

function deleteSymbol() {  document.getElementById('name_first').value
= document.getElementById('name_first').value.substr(0, document.getElementById('name_first').value.length
- 1); };

&lt;/script&gt;
</code></pre>

<p>However, when i add my jquery to the same element my existing javascript function returns the error : document.getElementById("name_first") is null</p>

<p>The Jquery function works fine and is declared as below.</p>

<pre><code>&lt;script type="text/javascript"&gt;
$(document).ready(function() {

$("input[type=text]").autoSuggest("search_data.php", {selectedItemProp: "name", searchObjProps: "name", minChars: 2});

});
&lt;/script&gt;
</code></pre>

<p><strong>:::::UPDATE::::::</strong></p>

<p>I call the printSymbol function from a flash keyboard with the following Actionscript code, which works fine.</p>

<pre><code>getURL("javascript:printSymbol('" + evnt.data + "');");
</code></pre>

<p>I have tried as suggested earlier to do this using only jquery functions as below.</p>

<pre><code>&lt;script type="text/javascript"&gt;
$(document).ready(function() {

$("input[type=text]").autoSuggest("search_data.php", {selectedItemProp: "name", searchObjProps: "name", minChars: 2});

function printSymbol(symbol) {
    $('name_first').append(symbol)
};

function deleteSymbol() {
    $('name_first').text( $('name_first').text().substr(0, $('#name_first').text().length - 1))
};
});
&lt;/script&gt;
</code></pre>

<p>However i do not know if this is working as i cant call these functions with my current Flash keyboard that is using : <code>getURL("javascript:printSymbol('" + evnt.data + "');");</code> to call. How would i externally call the new jquery functions?</p>

<p>Hope this is a little more informative for u guys, and thanks very much for your help so far :).</p>

<p><strong>UPDATE</strong></p>

<p>Please see below the fully updated code with some updates ( including html )</p>

<pre><code>&lt;?php session_start(); ?&gt;
&lt;?php require_once('Connections/db.php'); ?&gt;


          &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"&gt;
          &lt;html&gt;
          &lt;head&gt;
          &lt;title&gt;None&lt;/title&gt;
          &lt;!-- Include Javascript functions and css files --&gt;
          &lt;link href="autoSuggest.css" rel="stylesheet" type="text/css" /&gt;
          &lt;script type="text/javascript" src="jquery.js"&lt;/script&gt;
          &lt;script type="text/javascript" src="jquery.autoSuggest.js"&lt;/script&gt;

            &lt;script type="text/javascript"&gt;
            $(document).ready(function() {
            $("#name_first").autoSuggest("search_data.php", {selectedItemProp: "name", searchObjProps: "name", minChars: 2});
             });
            &lt;/script&gt;

          &lt;/head&gt;

          &lt;body&gt;

          &lt;form action="" method="get" name="form1" target="_self" id="form1"&gt;
          &lt;input name="name_first" type="text" id="name_first" value="" size="25" maxlength="50" /&gt;
          &lt;/form&gt;

&lt;script type="text/javascript"&gt; 

function printSymbol(symbol) {  
$("#name_first").val($("#name_first").val() + symbol); 
} 

function deleteSymbol() {  
$("#name_first").val($("#name_first").val().substr(0,$("#name_first").val().length 
- 1)); 
} 

&lt;/script&gt;


     &lt;object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="582" height="241"&gt;
    &lt;param name="movie" value="images/KB_NoNum.swf" /&gt;
    &lt;param name="quality" value="high" /&gt;
      &lt;embed src="media/KB_With_Space.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="582" height="241"&gt;  &lt;/embed&gt;
    &lt;/object&gt;
    &lt;/body&gt; 
    &lt;/html&gt;
</code></pre>

<p><strong>NEW UPDATE USING AUTOCOMPLETE FROM BASSISTANCE</strong>.</p>

<p>Code im now using with autcomplete plugin ( NOT ) autosuggest anymore.</p>

<pre><code>  &lt;script&gt;
  $().ready(function() {
    $("#name_first").change().autocomplete("data_search.php", {
        width: 260,
        selectFirst: false
    });
   });

  &lt;/script&gt;

&lt;script type="text/javascript"&gt; 

function printSymbol(symbol) {  
$("#name_first").val($("#name_first").val() + symbol); 
} 

function deleteSymbol() {  
$("#name_first").val($("#name_first").val().substr(0,$("#name_first").val().length 
- 1)); 
} 

&lt;/script&gt;
</code></pre>

<p>The function of the auto complete works fine pulling data from database etc while using normal keyboard.</p>

<p>When using my on screen keyboard that uses the printSymbol function, the text is entered into the text field, <strong>BUT</strong> it does not trigger the autocomplete.... <em>confused</em></p>

<p>It seems like this autocomplete plugin must use the keypress function to operate, so stumped again i think.</p>

<p><strong>UPDATE OF jQuery function ( not working )</strong></p>

<pre><code>    &lt;script&gt;
  $(document).ready(function() {
   $('.selector').bind('autocompletechange', function(event, ui) {
    $("#name_first").change().autocomplete("data_search.php", {
        width: 260,
        selectFirst: false
    });
   });
   });

  &lt;/script&gt;
</code></pre>

<p><strong>UPDATE using <a href="http://jquery-ui.googlecode.com/svn/tags/1.8rc1/ui/jquery-ui.js" rel="nofollow">http://jquery-ui.googlecode.com/svn/tags/1.8rc1/ui/jquery-ui.js</a></strong></p>

<p>Code used</p>

<pre><code>    &lt;script&gt;
  $(document).ready(function() {
    $("input").autocomplete({
     source: "search_data.php"});

   });
  &lt;/script&gt;
</code></pre>

<p>Again the function works with normal keyboard, but the input from the on screen keyboard does not trigger :( using keypress i guess again.</p>
