使用Jade/Pug进行Jquery自动完成 [英] Jquery Autocomplete with Jade/Pug

问题描述

在这种情况下，我需要帮助，即将在Jade/Pug中实现Jquery Autocomplete.自动完成的结果不会显示在表单中，尽管现在显示了错误.

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.

期望: 即时输入时，数据以#combine形式(自动)显示.

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/自动完成)

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

推荐答案

经过一些研究，测试，试验和错误.实际上，代码必须放在body的标签之后.因此它必须像:

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

最后，一切顺利.我希望这有帮助. 请参阅xdsoft的文档

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

这篇关于使用Jade/Pug进行Jquery自动完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！