使用Jquery时javascript函数的问题

Question

I am very new to Javascript and have only started playing with jquery recently. 我是Javascript的新手，最近才开始玩jquery。 I have a Javascript function that while used on its own within my project, works flawlessly. 我有一个Javascript函数，虽然在我的项目中单独使用，但完美无缺。 as below.. * UPDATE * these 2 functions are declared after the <input> tag and still throw the same error document.getElementById("name_first") is null when i add the jquery code. 如下所示.. * UPDATE *这两个函数在<input>标记之后声明，并且仍然抛出相同的错误document.getElementById("name_first") is null 在我添加jquery代码时 document.getElementById("name_first") is null 。

<script type="text/javascript">

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); };

</script>

However, when i add my jquery to the same element my existing javascript function returns the error : document.getElementById("name_first") is null 但是，当我将我的jquery添加到同一个元素时，我现有的javascript函数返回错误：document.getElementById（“name_first”）为null

The Jquery function works fine and is declared as below. Jquery函数工作正常，声明如下。

<script type="text/javascript">
$(document).ready(function() {

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

});
</script>

:::::UPDATE:::::: ::::: UPDATE ::::::

I call the printSymbol function from a flash keyboard with the following Actionscript code, which works fine. 我使用以下Actionscript代码从闪存键盘调用printSymbol函数，它工作正常。

getURL("javascript:printSymbol('" + evnt.data + "');");

I have tried as suggested earlier to do this using only jquery functions as below. 我已经按照之前的建议尝试使用jquery函数，如下所示。

<script type="text/javascript">
$(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))
};
});
</script>

However i do not know if this is working as i cant call these functions with my current Flash keyboard that is using : getURL("javascript:printSymbol('" + evnt.data + "');"); 但是我不知道这是否有效，因为我无法使用当前正在使用的Flash键盘调用这些函数： getURL("javascript:printSymbol('" + evnt.data + "');"); to call. 打电话。 How would i externally call the new jquery functions? 我如何在外部调用新的jquery函数？

Hope this is a little more informative for u guys, and thanks very much for your help so far :). 希望这对你们来说更有用，并且非常感谢你们的帮助到目前为止:)。

UPDATE UPDATE

Please see below the fully updated code with some updates ( including html ) 请参阅下面的完整更新代码以及一些更新（包括html）

<?php session_start(); ?>
<?php require_once('Connections/db.php'); ?>


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

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

          </head>

          <body>

          <form action="" method="get" name="form1" target="_self" id="form1">
          <input name="name_first" type="text" id="name_first" value="" size="25" maxlength="50" />
          </form>

<script type="text/javascript"> 

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)); 
} 

</script>


     <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">
    <param name="movie" value="images/KB_NoNum.swf" />
    <param name="quality" value="high" />
      <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">  </embed>
    </object>
    </body> 
    </html>

NEW UPDATE USING AUTOCOMPLETE FROM BASSISTANCE . 从BASSISTANCE使用AUTOCOMPLETE的新更新 。

Code im now using with autcomplete plugin ( NOT ) autosuggest anymore. 代码我现在使用autcomplete插件（NOT）autosuggest了。

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

  </script>

<script type="text/javascript"> 

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)); 
} 

</script>

The function of the auto complete works fine pulling data from database etc while using normal keyboard. 使用普通键盘时，自动完成功能可以很好地从数据库中提取数据。

When using my on screen keyboard that uses the printSymbol function, the text is entered into the text field, BUT it does not trigger the autocomplete.... confused 当使用使用printSymbol功能我在屏幕上的键盘，文字输入到文本字段，但它不会触发自动完成.... 困惑

It seems like this autocomplete plugin must use the keypress function to operate, so stumped again i think. 看起来这个自动完成插件必须使用按键功能来操作，所以我觉得再次难倒。

UPDATE OF jQuery function ( not working ) 更新jQuery函数（不工作）

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

  </script>

UPDATE using http://jquery-ui.googlecode.com/svn/tags/1.8rc1/ui/jquery-ui.js 使用http://jquery-ui.googlecode.com/svn/tags/1.8rc1/ui/jquery-ui.js进行更新

Code used 使用的代码

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

   });
  </script>

Again the function works with normal keyboard, but the input from the on screen keyboard does not trigger :( using keypress i guess again. 此功能再次适用于普通键盘，但屏幕键盘输入不会触发:(使用按键我再次猜测。

Answer 1

Are you sure that you haven't changed your form? 你确定你没有改变你的表格吗？ Perhaps you removed the id from your input? 也许你从输入中删除了id？ It should be: 它应该是：

<input type="text" name="name_first" id="name_first" />

The error suggests that either the id attribute is now missing, or is no longer "name_first". 该错误表明id属性现在已丢失，或者不再是“name_first”。

The jQuery works fine because it is matching all <input> tags with type="text" . jQuery工作正常，因为它匹配所有<input>标签与type="text" 。

So, <input type="text" name="name_first" /> matches your jQuery selector, but not your document.getElementById('name_first') selector. 因此， <input type="text" name="name_first" />匹配您的jQuery选择器，但不匹配您的document.getElementById('name_first')选择器。

============================================ ============================================

Edit following updates 编辑以下更新

Looks like the autosuggest only runs on the onKeyDown event, which isn't ever being called since you are changing the value, not typing into the input. 看起来autosuggest仅在onKeyDown事件上运行，因为您正在更改值而不是键入输入，因此不会调用该事件。

I once had to get an autocomplete box working with an on screen javascript keyboard and I ended up having to manually call the autocomplete on each key "press". 我曾经得到一个使用屏幕javascript键盘的自动完成框，我最终必须手动调用每个键“按”的自动完成。 I don't have access to the code anymore sorry (don't work there anymore). 我再也无法访问代码抱歉了（不再在那里工作了）。

What you'll need to either do is find an autocomplete that works correctly with values being changed by javascript (unlikely), or work out how to call the autocomplete manually. 您需要做的是找到一个自动完成功能，可以正确使用javascript（不太可能）更改的值，或者找出如何手动调用自动完成功能。

To do this, start off by giving the input field a default value (to save time) and start trying to work out (using the firebug console, which you can type javascript commands into) what you need to send to get the autocomplete to fire. 要做到这一点，首先给输入字段一个默认值（以节省时间）并开始尝试解决（使用firebug控制台，你可以输入javascript命令）你需要发送什么来获得自动完成功能。 Start by putting in keyChange() and hitting enter (that's the function name that is inside autocomplete). 首先输入keyChange()并按Enter键（这是自动完成内的函数名）。 See if anything happens. 看看有什么事情发生。 Someone else might be able to comment on whether (or how) you can call jQuery extension functions externally (google might know too). 其他人可能会评论你是否可以（或如何）在外部调用jQuery扩展函数（谷歌也可能知道）。

As for why your <input> tag isn't being updated, add some console.log() calls inside your printSymbol function. 至于为什么<input>标签没有更新，请在printSymbol函数中添加一些console.log()调用。 Eg: 例如：

function printSymbol(symbol) {
    console.log('symbol received: ' + symbol);
    console.log('name_first.val (pre): ' + $("#name_first").val());
    $("#name_first").val($("#name_first").val() + symbol); 
    console.log('name_first.val (post): ' + $("#name_first").val());
}

Should help you work out what's going on. 应该帮助你解决正在发生的事情。 If they all look correct, then autocomplete is probably resetting the value again. 如果它们看起来都正确，那么自动完成可能会再次重置该值。

Answer 2

You should put your functions/methods before or after $(document).ready(function() not inside however autosuggest you should put inside 你应该把你的函数/方法放在$(document).ready(function()之前或之后。 $(document).ready(function()不在里面但是你应该把它放在里面

Did you try like this together with jquery: 你和jquery一起尝试这样吗：

<script type="text/javascript"> 

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)); 
} 

</script>

Since you switched to autocomplete I might be able to help you, you need not to alter the jquery plugin itself, you can check out the demos example , look at the page source ex: 由于您切换到自动完成我可能能够帮助您，您无需更改jquery插件本身，您可以查看演示示例，查看页面源ex：

$("#suggest1").focus().autocomplete(cities);

this will autocomplete input with id suggest1 with array cities defined somewhere in the page on focus, you can change this to change if you have static data. 这将使用id suggest1自动完成输入，并在焦点的页面中的某个位置定义数组城市，如果您有静态数据，可以将其更改为更改。 The data on this plugins demo page is called localdata.js take a look at it. 此插件演示页面上的数据称为localdata.js，请查看它。

However if you have dynamic data you can use this : 但是，如果您有动态数据，可以使用：

$("#singleBirdRemote").change().autocomplete("search.php", {
        width: 260,
        selectFirst: false
    });

or you can use focus or whatever .. my timing is short I need to go ..hope this helps 或者你可以使用焦点或其他..我的时间很短我需要去..希望这有帮助

Try this : 尝试这个：

 <script>
  $(document).ready(function() {
   $('.selector').bind('autocompletechange', function(event, ui) {
  ...
   });
   });

  </script>

Answer 3

are you using document.ready ?? 你在使用document.ready吗？ if not wrap your jquery code with this ocde 如果没有用这个ocde包装你的jquery代码

$(document).ready(function() {

.... Jquery code goes here 


});

EDIT 编辑

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

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

Answer 4

I have seen weird issues with this when the functions did not have terminating semi-colons such as: 当函数没有终止的分号时，我已经看到了这个奇怪的问题，例如：

<script type="text/javascript"> 

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); }; 

</script>

使用Jquery时javascript函数的问题

问题描述

4 个解决方案

解决方案1
1 2010-02-23 10:36:49

解决方案2
1 2010-02-23 11:46:58

解决方案3
0 2010-02-23 11:08:06

解决方案4
0 2010-02-23 12:11:26

使用Jquery时javascript函数的问题

问题描述

4 个解决方案

解决方案1 1 2010-02-23 10:36:49

解决方案2 1 2010-02-23 11:46:58

解决方案3 0 2010-02-23 11:08:06

解决方案4 0 2010-02-23 12:11:26

解决方案1
1 2010-02-23 10:36:49

解决方案2
1 2010-02-23 11:46:58

解决方案3
0 2010-02-23 11:08:06

解决方案4
0 2010-02-23 12:11:26