javascript - 自动完成 JQuery-UI 未定义列表

Question

我一直在使用 jQuery UI 自动完成功能从数据库中提出建议并自动完成字段的其余部分。 javascript 工作得很好，但它的输出如下:

但是如果我按下按钮并输入它，该字段将使用数据库中的值完成。

这是我的 JavaScript :

$(function() {
//clear values on refresh
$('#nmbr').val("");

$(".kdbr").autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "<?php echo base_url();?>js/coba3.php",
            dataType: "json",
            data: {
                term: request.term
            },
            success: function (data) {
            //  var data = $.parseJSON(response);
                response($.map(data, function (el) {
                    return {
                        kdbr: el.kdbr,
                        nmbr: el.nmbr
                    };
                }));
            }
        });
    },
    select: function (event, ui) {
        // Prevent value from being put in the input:
        event.preventDefault();
        this.value = ui.item.kdbr;
        // Set the next input's value to the "value" of the item.
        $('#nmbr').val(ui.item.nmbr);

    }

});
});

这是我的 html 代码:

<form action="#" method="post">
 <p><label for="kdbr">KDBR</label><br />
     <input type="text" name="kdbr" id="kdbr" class = "kdbr" value="" /></p>
 <p><label for="nmbr">NMBR</label><br />
     <input type="text" name="nmbr" id="nmbr" class = "nmbr" value="" /></p>
</form>

这是我使用的 JavaScript 版本

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>

我必须写它，因为当我使用版本1.8.1时，列表显示单词

undefined

Answer 1

正如我在图片中看到的，我认为您没有包含 jquery-ui 的样式表，因为自动完成的样式不好。

请包含所有.css 或仅包含特定的 autocomplete.css

https://github.com/jquery/jquery-ui/tree/master/themes/base

以及这一行

 select: function (event, ui) {
        // Prevent value from being put in the input:
        event.preventDefault();
        this.value = ui.item.kdbr;
        // Set the next input's value to the "value" of the item.
        $('#nmbr').val(ui.item.nmbr);

     return false; //<--- you need to add this

    }

并更改

 return {
      kdbr: el.kdbr,
      nmbr: el.nmbr
 };

到此

return {
      label: el.kdbr,
       value: el.nmbr
  };

自动完成需要包含该值及其标签的项目的 json 返回值