javascript自動完成功能

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>

onclick錯誤仍然存​​在

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的標記時，還沒有填充方法。 兩種解決方案

1. 將腳本移到dom上方，然后放置var fill; 在$(document).ready之外。已經基本上這樣：

   var fill; $（document.ready（function（）{//你的代碼}）;

2. 不要使用onclick dom屬性，而是使用jquery綁定事件。 所以改變Ionut

對此：

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

並在document.ready中，添加：

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