jQuery自动完成提交表单上的选择项，按钮点击和/或输入？

问题描述

我试图使用jQuery Autocomplete将用户重定向到基于输入选择的url。我已经看到了解决我的部分问题的其他问题，但我无法将它们放在一起以提供以下功能：

在选择项目时触发重定向，以及在输入按键和/或按钮点击。

Jsfiddle演示 - >



来源：

  $（function（）{
 
 var stateList = [{
value：田纳西州，
url：http://www.tennessee.gov
}，{
 value：Texas，
url：http://www.texas.gov
}，{
value：Colorado，
 url：http://www.colorado.gov
}，{
value：Connecticut，
url：http： //www.ct.gov
}]; 
 
 $（＃states）。autocomplete（{
 source：stateList，
 select：function（event，ui）{
 go（ui.item。 url）; 
 
 //输入密钥
 // if（event.keyCode == 13）{} 
 
 //点击按钮点击
 // $（＃'zip-form'）。submit（）
}，
 response：function（event，ui）{
 if（！ui.content.length）{
 $（＃no-result）。show（）; 
} else {
 $（＃no-result）。hide（）; 
} 
 } 
}）; 
}）; 
 
函数go（url）{
 window.open（url）; 
} 
  

解决方案

新增了autoFocus：true;专注于结果中的第一项。
$ b

  focus：function（event，ui）{
 currentUrl = ui.item.url; 
 
 
 
函数btnGoClick（）{
 if（currentUrl！==）go（currentUrl）; 
 
 
 
 
 
 
添加了.keypress映射到输入字段中的13（回车键）关键重定向。 
  $（＃states）。keypress（function（event）{
 if（event.which == 13）{
 event.preventDefault（）; 
 btnGoClick（）; 
} 
}）; 
  
如果找不到匹配项，请设置指定的网址。
 
 
 
  
 
I'm trying to use jQuery Autocomplete to redirect a user to a url based on the input selection. I've seen other questions that address parts of my problem, but I am having trouble putting it all together to provide the following functionality:
Trigger redirect on selection of item, as well as on enter key press and/or button click. 
Jsfiddle Demo --> http://jsfiddle.net/wfaxvm43/5/

Sources:
http://jsfiddle.net/DLLVw/
jQuery autocomplete trigger button on select
JQuery Autocomplete: Submit Form on selection?
$(function () {

    var stateList = [{
        "value": "Tennessee",
            "url": "http://www.tennessee.gov"
    }, {
        "value": "Texas",
            "url": "http://www.texas.gov"
    }, {
        "value": "Colorado",
            "url": "http://www.colorado.gov"
    }, {
        "value": "Connecticut",
            "url": "http://www.ct.gov"
    }];

    $("#states").autocomplete({
        source: stateList,
        select: function (event, ui) {
            go(ui.item.url);

            // On enter key
            // if (event.keyCode == 13) {}

            // On button click
            //$(#'zip-form').submit()
        },
        response: function (event, ui) {
            if (!ui.content.length) {
                $("#no-result").show();
            } else {
                $("#no-result").hide();
            }
        }
    });
});

function go(url) {
    window.open(url);
}
 解决方案 
Added autoFocus: true; to focus on the first item in the results. Then had to get the url from the focused item.
focus: function (event, ui) {
        currentUrl = ui.item.url;
}


function btnGoClick() {
if (currentUrl !== "") go(currentUrl);
}
Added .keypress mapped to 13 (enter key) on the input field for enter key redirect. 
$("#states").keypress(function (event) {
if (event.which == 13) {
    event.preventDefault();
    btnGoClick();
}
});
Also set a specified url if no match was found.
http://jsfiddle.net/wfaxvm43/8/
                        
这篇关于jQuery自动完成提交表单上的选择项，按钮点击和/或输入？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！