首页 文章

选择jQuery UI Autocomplete后清除表单字段

提问于
浏览 次
87

我正在开发一个表单，并使用jQuery UI Autocomplete . 当用户选择一个选项时，我希望选择弹出一个附加到父 <p> 标记的范围 . 然后我希望字段清除而不是填充选择 .

我的 Span 看起来很好，但是我无法清除这个领域 .

如何取消jQuery UI Autocomplete的默认选择操作？

这是我的代码：

var availableTags = ["cheese", "milk", "dairy", "meat", "vegetables", "fruit", "grains"];
$("[id^=item-tag-]").autocomplete({
    source: availableTags,

    select: function(){
        var newTag = $(this).val();
        $(this).val("");
        $(this).parent().append("<span>" + newTag + "<a href=\"#\">[x]</a> </span>");
    }
});

简单地做 $(this).val(""); 不起作用 . 令人抓狂的是，如果我忽略自动完成功能，几乎所有功能都能正常工作，只需在用户输入逗号时执行操作：

$('[id^=item-tag-]').keyup(function(e) {
    if(e.keyCode == 188) {
        var newTag = $(this).val().slice(0,-1);
        $(this).val('');
        $(this).parent().append("<span>" + newTag + "<a href=\"#\">[x]</a> </span>");
    }
});

真正的最终结果是使自动完成功能可以进行多项选择 . 如果有人对此有任何建议，欢迎他们 .

jquery jquery-ui jquery-ui-autocomplete

5 回答

  • 0

    这对我来说很有用 .

    选择事件后，我使用了事件更改 .

    change:function(event){
   $("#selector").val("");  
   return false;
 }

    我是初学者！

    回复于
  • 163

    试试吧

    select: function (event, ui) {
    $(this).val('');
    return false;       
}
    回复于
  • 19

    将 $(this).val(''); return false; 添加到 select 函数的末尾以清除该字段并取消该事件:)

    这将阻止值更新 . 你可以看到它是如何工作的around line 109 here .

    那里的代码特别检查错误：

    if ( false !== self._trigger( "select", event, { item: item } ) ) {
  self.element.val( item.value );
}
    回复于
  • 4

    您也可以使用event.preventDefault（）而不是返回false .

    select: function(event, ui){
    var newTag = $(this).val();
    $(this).val("");
    $(this).parent().append("<span>" + newTag + "<a href=\"#\">[x]</a> </span>");
    event.preventDefault();
}
    回复于
  • 6

    select select回调中需要返回false，以清空该字段 . 但是如果你想再次控制字段，即设置值，你必须调用一个新函数来打破ui .

    也许你有一个提示值，例如：

    var promptText = "Enter a grocery item here."

    将其设置为元素的val . （关注焦点我们设置为''） .

    $("selector").val(promptText).focus(function() { $(this).val(''); }).autocomplete({
    source: availableTags,
    select: function(){
        $(this).parent().append("<span>" + ui.item.value + "<a href=\"#\">[x]</a> </span>");
     foo.resetter(); // break out //
    return false;  //gives an empty input field // 
    }
});

foo.resetter = function() {
  $("selector").val(promptText);  //returns to original val
}
    回复于

相关问题