Jquery Autocomplete with Jade/Pug

问题

i need help for this case, about to implement Jquery Autocomplete in Jade/Pug. The result of autocomplete doesnt display in form, although there are now error shown.

Actual : No error, but the data when im typing doesnt display as expected.

Expect : The data display in form #combine (automatically) when im typing.

I use inline code as "very basic" things. Im sure that there are no error showing in inspect of browser, the script at the right path.

Javascript (jqplugins/autocomplete)

script(src='/demo/jquery.js', type='text/javascript')
link(rel='stylesheet', href='/autocomplete.css')
script(src='/autocomplete.js', type='text/javascript')
script.
  var states = [
  'Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
  'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
  'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
  'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
  'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
  'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
  'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
  'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
  'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
  ];
  $('#auto1').autocomplete({
  source:[states]
  });

.pb-2.mt-2.mb-4.border-bottom
    h3 Registrasi Member
  form(id='signup-form', method='POST')
    input(type='hidden', name='_csrf', value=_csrf)
    .form-group.row
  label.col-md-3.col-form-label.font-weight-bold.text-right(for='tags') Pilih Kota/Kabupaten
  .col-md-7
    input#auto1.form-control(type='text', placeholder='enter state')
    .form-group.offset-sm-3.col-md-7.pl-2
      button.btn.btn-success(type='submit')
        i.fas.fa-user-plus.fa-sm
        | Signup

回答1:

After did some research, test, trial and error. In fact the code have to put after the tag of body. So it must be like :

</body>

script(src='/demo/jquery.js', type='text/javascript')
link(rel='stylesheet', href='/autocomplete.css')
script(src='/autocomplete.js', type='text/javascript')
script.
  var states = [
  'Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
  'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
  'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
  'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
  'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
  'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
  'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
  'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
  'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
  ];
  $('#auto1').autocomplete({
  source:[states]
  });

Finally, everything goes well. I hope this helps. Please refer to this documentation of jquery autocomplete by xdsoft,

来源：https://stackoverflow.com/questions/52907373/jquery-autocomplete-with-jade-pug

标签

javascript

jquery

autocomplete

pug