Question

我在做什么？

我已将此自动完成功能附加到输入字段。作为自动填充行为它允许您根据查找数据键入并显示一些建议。

因此，用户可以只输入一些字母，然后根据它获得建议的数据。

当用户从该建议数据中选择任何内容时，我保存其ID以进行进一步操作。我将该id保存在隐藏的输入字段中。

一切正常。

问题：

案例1：第一次当用户从列表中选择任何内容及其ID时   得到隐藏的输入。那工作正常。

但是当用户决定更改它并且新值不在时   列表然后Obyesly我必须清除隐藏的输入，我不能   清除。（这是问题1）

案例2：自动填充功能有选项 - onInvalidateSelection 但是   它不适合我。

这是代码：

$('body').on('focus',".qualification_major_data", function(){

  var qualifications_major_string = [{data: "1", value: "Tom Smith"},
                        {data: "2", value: "Tommy Smith"},
                        {data: "3", value: "add Smith"}];

 $(this).autocomplete({

                lookup: qualifications_major_string,
                appendTo: '.qualification_major_div',
                minChars: 2,
                onSelect: function (suggestion) {

                // On select I am Saving the Id of the Selected Value to the Hidden Input
                     alert('You selected: ' + suggestion.value + ', ' + suggestion.data);
                    var selectedValueID = suggestion.data;
                    $(this).closest('.qualification_major_div').find('input[name="qualification_major_id_hidden[]"]').val(selectedValueID);
                },                
                onInvalidateSelection: function() { 

                    // On Invalid Select or Enter I want to Clear the Hidden Input Value. Which I am not Able to do.
                    // This Part is the Problem
                    $('.qualification_major_div input[name="qualification_major_id_hidden[]"]').val('');
                },
                showNoSuggestionNotice: true,
                noSuggestionNotice: 'Sorry, no matching results'

            });

});

这是它的HTML部分：

 <div class="col-md-4">
    <div class="form-group qualification_major_div">
          <label for="qualification_major" class="control-label">Qualification Major *</label>
          <input type="text" name="qualification_major_id[]" id="qualification_major_id" required class="form-control require qualification_major_data" />
          <input type="hidden" id="qualification_major_id_hidden" name="qualification_major_id_hidden[]">
    </div>
</div>

Answer 1

我已经测试了你的代码并且它运行良好。我唯一改变的是$('body').on('focus',".qualification_major_data", function(){

我没有发现每次单击输入字段时实例化所有对象数组都很有用。如果有背后的原因，请随意离开。如果没有，则删除该功能并替换$(this).autocomplete({

与
$('#qualification_major_id').autocomplete({

导致错误的原因（Case1和Case2）？我知道这可能听起来很奇怪，但这是实际alert()我建议您将来使用console.log()。

我已经让你成为一个JSFiddle并留下了一些评论。

JSFiddle

Answer 2

我自己发布答案，因为这对我而言不适用于正确的解决方案，但它只是解决此问题的方法。

首先，我必须将事件从焦点更改为 keypress 。然后我注意到在动态创建的字段中，如果我们想要对特定元素执行某些操作，那么我们需要一些与该元素相关的唯一id或类。所以我只为特定事件动态添加一个唯一的类。（在事件之后我删除了添加的类）。

对于自动填充问题获取更改后的值ID我使用了 noSuggestionNotice 属性之一，因为每当我更改值时它都会触发。

1步骤：我已决定使用 noSuggestionNotice 删除ID。

noSuggestionNotice: function (suggestion) {
    $('.currentQualificationMajor').closest('.qualification_major_div').find('input[name="qualification_major_id_hidden[]"]').val('');
}

2步骤：我必须将事件更改为按键

 $('#qualification_outer_div').on('keypress', '.qualification_major_data', function(){

3步骤：由于我动态添加此自动完成功能，所以我必须这样做使用Unique Class或id对特定输入执行某些操作。所以我将这个类的脚本添加到当前的字段中按键。

$(this).addClass("currentQualificationMajor");

4步骤：所以在脚本结束后我删除了我添加的课程。

$(this).removeClass("currentQualificationMajor");

以下是完整代码：

$('#qualification_outer_div').on('keypress', '.qualification_major_data', function(){

$(this).addClass("currentQualificationMajor"); 

$('.currentQualificationMajor').autocomplete({

        lookup: qualifications_major_string,
        appendTo: '.qualification_major_div',
        minChars: 2,
        onSelect: function (suggestion) {

            var selectedValueID = suggestion.data;
            $(this).closest('.qualification_major_div').find('input[name="qualification_major_id_hidden[]"]').val(selectedValueID);
        },                
        onInvalidateSelection: function() {                                 
            $(this).closest('.qualification_major_div').find('input[name="qualification_major_id_hidden[]"]').val('');
        },
        showNoSuggestionNotice: true,
        noSuggestionNotice: function (suggestion) {

              $('.currentQualificationMajor').closest('.qualification_major_div').find('input[name="qualification_major_id_hidden[]"]').val('');
        }

    });
});

我没有给出正确答案，因为它只是一种解决方法，而不是正确的解决方案。但它的工作。

在Jquery自动完成中输入的无效输入上的清除输入字段

2 个答案: