Question

你好我有以下代码有问题，我试图在你点击输出将其插入输入字段时。你能帮助我吗，几个小时没试好运。

<script type="text/javascript">
var input = $('#CompanyName');
var output = $('#output');
var timer;

input.on('keyup', function() {
    delaySearch(this.value); 
});

function delaySearch(keywords) {
    clearTimeout(timer);
    timer = setTimeout(function() {
        performSearch(keywords);
    }, 1000);
}
function performSearch(keywords) {

    $.ajax({
      type: "POST",
      url: "/print/order/search",
      data: { query: keywords },
      cache: false,
      dataType: "json",
      async: true,
      success: function(data) {
        for(var key in data) {
          output.append('<li onclick="fill('+ data[key].ClientName +')">' + data[key].ClientName) + '</li>';
        }
      }
  });
}
function fill(thisValue) {
  input.val(thisValue);
  clearTimeout(timer);
}
</script>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="CompanyName">Firma</label>
  <div class="col-md-5">
  <input id="CompanyName" onblur="fill();" name="CompanyName" type="text" placeholder="Firma" class="form-control input-md">
  <ul id="output"></ul>
  <span class="help-block"></span>
  </div>
</div>


Uncaught ReferenceError: somevalue is not defined

更新：添加jquery ready函数后，我注意到了一些错误，并在这里修复它们是对代码的更新

<div class="form-group">
          <label class="col-md-4 control-label" for="CompanyName">Firma</label>
          <div class="col-md-5">
          <input id="CompanyName" name="CompanyName" type="text" placeholder="Firma" class="form-control input-md">
          <ul id="output"><li onclick="fill(Ionut)">Ionut</li></ul>
          <span class="help-block">Nume Firma</span>
          </div>
        </div> 



<script type="text/javascript">
$(document).ready(function() {
  var input = $('#CompanyName');
  var output = $('#output');
  var timer;

  input.on('keyup', function() {
      delaySearch(this.value); 
  });

  function delaySearch(keywords) {
      clearTimeout(timer);
      timer = setTimeout(function() {
          performSearch(keywords);
      }, 1000);
  }
  function fill(thisValue) {
    input.val(thisValue);
  }
  function performSearch(keywords) {

      $.ajax({
        type: "POST",
        url: "/print/order/search",
        data: { query: keywords },
        cache: false,
        dataType: "json",
        async: true,
        success: function(data) {
          for(var key in data) {
            output.append('<li onclick="fill(' + data[key].ClientName + ')">' + data[key].ClientName) + '</li>';
          }
        }
    });
  }
});
</script>

点击错误仍然存在

Uncaught ReferenceError: fill is not defined

Answer 1

您需要将脚本放在HTML下面。那或将其包装在jQuery Document ready函数中。并确保在脚本

之前在页面上加载了jQuery

Answer 2

realseanp正确答案。我会尽力为你解释一下。当浏览器开始处理和呈现页面时，它会自上而下加载。因此，在创建DOM之前，您的javascript脚本正在运行和评估。

所以你的jquery选择器：var input = $('#CompanyName');如果要检查它们将是一个空数组。他们找不到#CompanyName元素，因为它尚未被渲染。

如果你使用jQuery的$(document).ready()函数，那么可以确保你的代码在dom完成渲染之前不会运行，因此会找到你想要的元素。最后，您的代码需要更改为：

$(document).ready(function(){
    //Put your code in here.
    //It will then fire once the dom is ready.
});

更新：

此外，您的更新。我注意到错误是'fill'没有定义。填写是你的onclick方法。渲染dom后，您可以评估js脚本。因此，在渲染dom时，渲染带有onclick的标记时，还没有填充方法。两种解决方案：

将脚本移到dom上方，并将var fill;置于$(document).ready之外，基本上就是这样：
var fill; $（的document.ready（函数（）{ //你的代码 }）;
不要使用onclick dom属性，而是使用jquery绑定事件。所以改变约努茨

到此：

  <ul id="output"><li>Ionut</li></ul>

并在document.ready中，添加：

 $('#output li').click(function(e) {
     fill(/*your value/*)
 });

javascript自动完成功能

2 个答案: