将json数组更新为数据自动完成后，它不会更新data-autocomplete的值

Question

我正在为医院创建一个动态表单。这里我有数据自动完成的问题。问题是在将json数组更新为 data-autocomplete =＆＃39; ＆＃39; 它没有更新 data-autocomplete =＆＃39;的值＆＃39; 即可。 因为我使用html（bootstrap）和php模板为我的前端表单，所以所有链接都正确arrenged和一个类似于此的输入元素工作正常，但我已使用PHP为该输入更新值。

Html代码

<input type='text' class="form-control ui-autocomplete-input" data-autocomplete='' autocomplete="off" id="patient_type_desc" name="patient_type_desc" class="form-control" />

JQuery代码

$.post(url, {"referral":referral}, function(data){
   //console.log(data);
   $('#patient_type_desc').attr('data-autocomplete', data);
});

此代码正在更新值，但在表单中，自动填充不会填充建议。

  

数据变量如下所示

["name1","name2"]

我尝试使用这个jQuery代码但没有用 - 这段代码根本没有工作

$( "#patient_type_desc" ).autocomplete({
  source: data
});

Answer 1

请检查以下代码，在此处找到小提琴Fiddle 。希望这可以帮到你。

<div class="form-group ui-widget">
<label for="plugins">Patient Type desc</label>
<input type='text' class="form-control ui-autocomplete-input" data-autocomplete='' autocomplete="off" id="patient_type_desc" name="patient_type_desc" class="form-control" />
</div>

<script>
  $(function()   
     var patient_type_desc = [
    "name1",
    "name2",
    "name3",
    "name4"
    ];

    $("#patient_type_desc").autocomplete({source: patient_type_desc});

    $("ul.ui-autocomplete").css("left","450px");

});
</script>

<style>
ul.ui-autocomplete { padding-left: 0; list-style-type: none; border: black 1px solid; display: inline-block;}
ul.ui-autocomplete li:hover { background-color: gray; }
ui-helper-hidden-accessible {display: none;}
</style>

Answer 2

我的Jquery现在就像这样

$.post(url, {"referral":referral}, function(data){
                //console.log(data);
                $( "#patient_type_desc" ).autocomplete({
                    source: data
                });
                    //$('#patient_type_desc').attr('data-autocomplete', data);
                }, "json");

最后加入“json”。谢谢所有兄弟。