Question

我是Javascript的新手，最近才开始玩jquery。我有一个Javascript函数，虽然在我的项目中单独使用，但完美无缺。如下所示.. * UPDATE *这两个函数在<input>标记之后声明，并在添加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>

但是，当我将jquery添加到同一个元素时，我现有的javascript函数返回错误：document.getElementById（“name_first”）为null

Jquery函数工作正常，声明如下。

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

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

});
</script>

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

我使用以下Actionscript代码从flash键盘调用printSymbol函数，该函数可以正常工作。

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

我已按照前面的建议尝试仅使用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>

但是我不知道这是否有效，因为我无法使用当前正在使用的getURL("javascript:printSymbol('" + evnt.data + "');");调用的Flash键盘调用这些函数。我如何在外部调用新的jquery函数？

希望这对你们来说更有用，并且非常感谢你们的帮助：）。

更新

请参阅下面的完整更新代码以及一些更新（包括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>

从BASSISTANCE使用AUTOCOMPLETE的新更新。

我现在正在使用autcomplete插件（NOT）自动提取代码。

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

使用普通键盘时，自动完成功能可以很好地从数据库中提取数据。

当使用我使用printSymbol功能的屏幕键盘时，文本输入文本字段，但它不会触发自动完成.... confused

看起来这个自动完成插件必须使用按键功能来操作，所以我想再次难过。

更新jQuery函数（不工作）

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

  </script>

使用http://jquery-ui.googlecode.com/svn/tags/1.8rc1/ui/jquery-ui.js

进行更新

使用的代码

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

   });
  </script>

此功能再次适用于普通键盘，但屏幕键盘的输入不会触发:(再次使用按键我会再次猜测。

Answer 1

你确定没有改变你的表格吗？也许你从输入中删除了id？它应该是：

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

错误表明id属性现在已丢失，或者不再是“name_first”。

jQuery工作正常，因为它将所有<input>标记与type="text"匹配。

因此，<input type="text" name="name_first" />与您的jQuery选择器匹配，但不匹配您的document.getElementById('name_first')选择器。

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

修改以下更新

看起来autosuggest仅在onKeyDown事件上运行，因为您正在更改值而不是输入输入，因此不会被调用。

我曾经得到一个使用屏幕javascript键盘的自动完成框，我最终不得不在每个键“按”上手动调用自动完成。我再也无法访问代码抱歉了（不再在那里工作了）。

您需要做的是找到一个自动完成功能，该功能可以正确处理javascript（不太可能）更改的值，或者找出如何手动调用自动完成功能。

要做到这一点，首先给输入字段一个默认值（以节省时间）并开始尝试解决（使用firebug控制台，你可以输入javascript命令）你需要发送什么来获得自动完成开火。首先输入keyChange()然后按Enter键（这是自动完成内的函数名）。看看有什么事情发生。其他人可能会评论你是否可以（或如何）在外部调用jQuery扩展函数（谷歌也可能知道）。

至于您的<input>标记未更新的原因，请在printSymbol函数中添加一些console.log()调用。例如：

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

应该帮助你弄清楚发生了什么。如果它们看起来都正确，那么自动完成可能会再次重置该值。

Answer 2

你应该在$(document).ready(function()之前或之后把你的功能/方法放在里面但是你应该把它放在里面

你和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>

由于你切换到自动完成我可能能够帮助你，你不需要改变jquery插件本身，你可以查看演示示例，查看页面源ex：

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

这将使用id suggest1自动完成输入，并在焦点的页面中的某处定义数组城市，如果您有静态数据，可以更改此更改。此插件演示页面上的数据称为localdata.js，请查看它。

但是，如果你有动态数据，你可以使用它：

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

或者你可以使用焦点或其他......我的时间很短我需要去..希望这有帮助

试试这个：

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

  </script>

Answer 3

你正在使用document.ready吗？如果没有用这个ocde包装你的jquery代码

$(document).ready(function() {

.... Jquery code goes here 


});

编辑

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

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

Answer 4

当函数没有终止分号时，我已经看到了这个奇怪的问题，如：

<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 个答案: