如果未找到匹配项,则Jquery自动填充明文框值

时间:2015-09-03 02:04:23

标签: jquery autocomplete textbox

当我输入列表中不可用的值时,我已经创建了一个自动完成文本框,它将自动清除结果正确的文本框,但是当我键入列表中的数据时添加了一些措辞,虽然最终的值不在列表中,但文本框值不明确。



    $(document).ready(function() {

    var source = ['jQuery', 'Dojo', 'ExtJs', 'Prototype', 'Java', 'Android', 'MySQL', 'PHP'];

    $("input#myDropDown").autocomplete({
        minLength: 0,
        source: source,
        autoFocus: true,
        scroll: true,
    }).focus(function() {
        $(this).autocomplete("search", "");
    }).live("blur", function(event) {
        var autocomplete = $(this).data("autocomplete");
        var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex($(this).val()) + "$", "i");
        autocomplete.widget().children(".ui-menu-item").each(function() 
          {
            var item = $(this).data("item.autocomplete");
            if (matcher.test(item.label || item.value || item)) {
                //There was a match, lets stop checking
                autocomplete.selectedItem = item;
                return;
            }
        });

        if (autocomplete.selectedItem) {
            autocomplete._trigger("select", event, {
                item: autocomplete.selectedItem
            });
        //there was no match, clear the input
        } else {
            $(this).val('');
        }
    });
});

    .ui-autocomplete { 
                        position: absolute; 
                        cursor: default; 
                        height: 150px; 
                        overflow-y: scroll; 
                        overflow-x: hidden;
                     }

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>

       <input id="myDropDown" type="text" name="myDropDown" />
&#13;
&#13;
&#13;

问题

项目清单
enter image description here

当我从项目中选择任何项目并添加额外的措辞时。值键与记录不匹配,但文本框值不明确。我需要再次关注并重新打开文本框,文本框将检测匹配并清除输入。
enter image description here

2 个答案:

答案 0 :(得分:1)

我不是专家,但我觉得这种情况正在发生,因为autocomplete窗口小部件在您通过单击选择其中一个选项时会从实际input中窃取焦点。基本上,您看到的具有焦点的输入实际上是由窗口小部件创建的叠加,因此blur事件在该叠加层上而不是您将该函数绑定到的实际input

在自动填充选项中添加select: function( event, ui ) { $(this).focus() }可解决此问题。

$(document).ready(function() {
  var source = ['jQuery', 'Dojo', 'ExtJs', 'Prototype', 'Java', 'Android', 'MySQL', 'PHP'];

    $("input#myDropDown").autocomplete({
        minLength: 0,
        source: source,
        autoFocus: true,
        scroll: true,
        select: function( event, ui ) { $(this).focus() }
    }).focus(function() {
        $(this).autocomplete("search", "");
    }).live("blur", function(event) {
        var autocomplete = $(this).data("autocomplete");
        var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex($(this).val()) + "$", "i");
        autocomplete.widget().children(".ui-menu-item").each(function() 
          {
            var item = $(this).data("item.autocomplete");
            if (matcher.test(item.label || item.value || item)) {
                //There was a match, lets stop checking
                autocomplete.selectedItem = item;
                return;
            }
        });

        if (autocomplete.selectedItem) {
            autocomplete._trigger("select", event, {
                item: autocomplete.selectedItem
            });
        //there was no match, clear the input
        } else {
            $(this).val('');
        }
    });
});
.ui-autocomplete { 
                        position: absolute; 
                        cursor: default; 
                        height: 150px; 
                        overflow-y: scroll; 
                        overflow-x: hidden;
                     }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>


       <input id="myDropDown" type="text" name="myDropDown" />

答案 1 :(得分:0)

如果使用mysql作为源,如果与db不匹配,如何清除文本?

desired=frame.loc[(frame["colB"]>=frame["colB"].shift(-1)) &
          (frame["colB"].shift(-1)>=frame["colB"].shift(-2) )]
print(desired)