CODEWITHSUNDEEP
javascript
Bogdan
Bogdan

Reputation: 713

javascript auto complete function

Hello i have the following code with problems, i'm trying to make it when you click on the output to insert it into the input field. Can you help me please, been trying for hours without any luck.

<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

Update: After adding jquery ready function i noticed some errors around and fixed them here is an update on the code

<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 the error persists 

Uncaught ReferenceError: fill is not defined

Upvotes: 0

Views: 429

Answers (2)

Blaine Kasten
Blaine Kasten

Reputation: 1693

realseanp is onto the correct answer. I'll try to explain it a little better for you. When a browser starts processing and rendering a page, it loads top down. So your javascript scripts are being ran and evaluated before the DOM is created.

So your jquery selectors: var input = $('#CompanyName'); if you were to inspect them are going to be an empty array. They cannot find the #CompanyName element because it has not yet been rendered.

If you use jQuery's $(document).ready() function, then you can be assured that your code will not run until the dom is finished rendering, and therefore will find the elements as you intend them to. So in the end, your code will need to change to this:

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

UPDATE:

Additionally, with your update. I'm noticing that the error is that 'fill' is not defined. fill being your onclick method. You have your js script evaluating after the dom is rendered. So at the time that the dom is rendered, and the tag with the onclick is rendered, no fill method yet exists. Two solutions:

  1. Move the script above the dom, and place a var fill; outside of the $(document).ready so essentially this:

    var fill; $(document.ready(function(){ //your code });

  2. Don't use the onclick dom attribute, and instead use jquery to bind the event. So change Ionut

to this:

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

and inside the document.ready, add:

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

Upvotes: 1

pizzarob
pizzarob

Reputation: 12029

You need to put your script below your HTML. That or wrap it in the jQuery Document ready function. And make sure you have jQuery loaded on the page, before your script

Upvotes: 1

Related Questions