jQuery UI自动完成：如何允许自由文本

我想给用户添加他自己的变体的可能性，而不仅仅是建议的。但是当我在字段中输入内容并点击ENTER时，我的表单提交。jQuery UI自动完成：如何允许自由文本

然后我试着去捕获我的领域的keydown事件，但是在这种情况下，我很可能从使用箭头的建议中选择一个变体并且输入键，因为ui参数是未定义的。

$('#field_id').on('keydown', function(event) { 
     if (event.keyCode == $.ui.keyCode.ENTER 
      || event.keyCode == $.ui.keyCode.NUMPAD_ENTER) 
     { 

      $('#field_id').trigger('autocompleteselect'); 
     } 
    }); 

    $('#field_id').autocomplete({ 
     source: [{"id":"20","value":"This is not mandatory decline reason"},{"id":"21","value":"You are have to be rejected"}] 
     minLength: 0 
    }).on('autocompleteselect', function(event, ui) { 
     // if I click on suggestion using mouse - everything is ok 
     // but not for ENTER-key choosing 

     // I want something like that: 
     if (ui.item) { 
       id = ui.item.id; 
       value = ui.item.value; 
     } else { 
       id = 'my_new_item'; 
       value = $(this).val(); 
     } 
     return false; 
    });

来源

2013-02-18 DrSat

我不确定为什么你的UI参数是未定义的......但为什么你只是在你的if语句之前放了一个window.alert（event.keyCode）。然后，您可以尝试使用输入和键盘输入以查看数字出现的情况。 – rnirnber 2013-02-18 19:29:16

也...你可以尝试keyyd事件而不是keydown – rnirnber 2013-02-18 19:29:38

如果你想防止形式从提交上输入你可以使用的preventDefault：

$(document).ready(function() { 
    $(window).keydown(function(event){ 
    if(event.keyCode == 13) { 
     event.preventDefault(); 
     return false; 
    } 
    }); 
});

对于自动完成的，要知道，引发“autocompleteselect”事件时，按下Enter键将当用户点击输入建议项目时，触发'autocompleteselect'处理程序两次。为了避免这种情况和缺少的UI参数，请尝试使用回复回调将用户输入添加为建议的项目，并将自动对焦设置为true。

下面是一个示例，其中用户输入在自动填充不匹配时添加到建议列表中。

$('#field_id').autocomplete({ 
    source: [{ 
     "id": "20", 
      "value": "This is not mandatory decline reason" 
    }, { 
     "id": "21", 
      "value": "You are have to be rejected" 
    }], 
    minLength: 0, 
    autoFocus: true, 
    response: function (event, ui) { 

     if (ui.content.length == 0) { 
      ui.content.push({ 
       label: "New Search value: " + $(this).val(), 
       value: $(this).val(), 
       id: 0 
      }); 
     } 
    } 
}).on('autocompleteselect', function (event, ui) { 
    id = ui.item.id; 
    value = ui.item.value; 

    return false; 
});

这里是jsfiddle上面的例子。

希望这会有所帮助。

来源

2013-02-18 19:59:31 jfbalanc

非常感谢！你是我的英雄 ;） – DrSat 2013-02-18 20:02:56

jQuery UI自动完成：如何允许自由文本

回答

相关问题