Question

我的自动填充仅适用于重新加载页面的情况。如果我通过链接导航到该页面，则不起作用。我已经包含了源代码和我使用的演示。在演示中，我更改了var data字段，以显示我在应用程序中提取的值。

注意：这适用于Ruby on Rails应用程序。

有人可以说这有什么问题吗？

<script>
    $(function() {
        var doctors = <%== @doctors %>;

        var data = doctors.map(function (a) {
            return { label: a[0], id: a[1] };
        });

        $('#tags').autocomplete({
            delay: 0,
            source: data,
            select: function(event, ui) {
                $('#doctor_id').val(ui.item.id);
            }
        });
    } );


</script>

HTML code：

<div class="row">
              <div class="input-field col s12 m6">
                <i class="material-icons prefix">textsms</i>
                <label class="active" for="tags">Doctor</label>
                <input id="tags" type="text" class="autocomplete" required/>
                <input id="doctor_id" name="doctor_id" type="hidden" required/>
                </div>
              </div>

演示：JSfiddle

Answer 1

我尝试使用正确运行的脚本编写代码

这是头部

 <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Autocomplete - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">

这是你的小提琴剧本

    var data = [
    {label: "Ann Perera", id: 1},
    {label: "Sam Perera", id: 2},
    {label: "John Perera", id: 3}
    ];

    $('#tags').autocomplete({
        delay: 0,
        source: data,
        select: function(event, ui) {
            $('#doctor_id').val(ui.item.label);
        }
    });
} );

自动填充功能无法正常工作

1 个答案: