Question

我有下面的代码，用于显示自动完成列表，我无法找到如何在输入框中显示标签文本而不是值。有人可以帮忙。

<input type="text" id="box"><br>
<input type="text" id="box2">



 $("#box").autocomplete({
    minLength: 3,
      source:
    [{"label":"Sanikiluaq Airport ,CA-YSK","value":"YSK"},{"label":"Sandy Lake Airport ,CA-ZSJ","value":"ZSJ"},{"label":"Saniat Rmel Airport ,MA-TTU","value":"TTU"},{"label":"San Diego International Airport ,US-SAN","value":"SAN"},{"label":"San Antonio International Airport ,US-SAT","value":"SAT"},{"label":"Santa Barbara Municipal Airport ,US-SBA","value":"SBA"},{"label":"San Luis County Regional Airport ,US-SBP","value":"SBP"},{"label":"San Francisco International Airport ,US-SFO","value":"SFO"},{"label":"Norman Y. Mineta San Jose International Airport ,US-SJC","value":"SJC"},{"label":"San Angelo Regional Mathis Field ,US-SJT","value":"SJT"},{"label":"Santa Maria Pub/Capt G Allan Hancock Field ,US-SMX","value":"SMX"},{"label":"John Wayne Airport-Orange County Airport ,US-SNA","value":"SNA"},{"label":"San Javier Airport ,ES-MJV","value":"MJV"},{"label":"San Sebastian Airport ,ES-EAS","value":"EAS"},{"label":"Santorini Airport ,GR-JTR","value":"JTR"},{"label":"Santa Maria Airport ,PT-SMA","value":"SMA"},{"label":"Flores Airport ,PT-FLW","value":"FLW"},{"label":"Graciosa Airport ,PT-GRW","value":"GRW"},{"label":"Las Américas International Airport ,DO-SDQ","value":"SDQ"},{"label":"Cibao International Airport ,DO-STI","value":"STI"},{"label":"Mundo Maya International Airport ,GT-FRS","value":"FRS"},{"label":"Sangster International Airport ,JM-MBJ","value":"MBJ"},{"label":"San Cristobal De Las Casas Airport ,MX-SZT","value":"SZT"},{"label":"Los Cabos International Airport ,MX-SJD","value":"SJD"},{"label":"Ponciano Arriaga International Airport ,MX-SLP","value":"SLP"},{"label":"Juan Santamaria International Airport ,CR-SJO","value":"SJO"},{"label":"Tobias Bolanos International Airport ,CR-SYQ","value":"SYQ"},{"label":"El Salvador International Airport ,SV-SAL","value":"SAL"},{"label":"San Salvador Airport ,BS-ZSA","value":"ZSA"},{"label":"Santo Pekoa International Airport ,VU-SON","value":"SON"},{"label":"Sana'a International Airport ,YE-SAH","value":"SAH"},{"label":"Sand Point Airport ,US-SDP","value":"SDP"},{"label":"Henderson Field ,UM-MDY","value":"MDY"},{"label":"Suboficial Ay Santiago Germano Airport ,AR-AFA","value":"AFA"},{"label":"Teniente Benjamin Matienzo Airport ,AR-TUC","value":"TUC"},{"label":"Domingo Faustino Sarmiento Airport ,AR-UAQ","value":"UAQ"},{"label":"Brigadier Mayor D Cesar Raul Ojeda Airport ,AR-LUQ","value":"LUQ"},{"label":"Gobernador Horacio Guzman International Airport ,AR-JUJ","value":"JUJ"},{"label":"Antoine De St Exupery Airport ,AR-OES","value":"OES"},{"label":"Capitan D Daniel Vazquez Airport ,AR-ULA","value":"ULA"},{"label":"Santa Rosa Airport ,AR-RSA","value":"RSA"},{"label":"San Carlos De Bariloche Airport ,AR-BRC","value":"BRC"},{"label":"Santa Maria Airport ,BR-AJU","value":"AJU"},{"label":"Santa Genoveva Airport ,BR-GYN","value":"GYN"},{"label":"Santo Ângelo Airport ,BR-GEL","value":"GEL"},{"label":"Santa Maria Airport ,BR-RIA","value":"RIA"},{"label":"Maestro Wilson Fonseca Airport ,BR-STM","value":"STM"},{"label":"Comodoro Arturo Merino Benítez International Airport ,CL-SCL","value":"SCL"},{"label":"San Luis Airport ,CO-IPI","value":"IPI"},{"label":"Simón Bolívar International Airport ,CO-SMR","value":"SMR"},{"label":"Gustavo Rojas Pinilla International Airport ,CO-ADZ","value":"ADZ"},{"label":"Santiago Perez Airport ,CO-AUC","value":"AUC"},{"label":"Viru Viru International Airport ,BO-VVI","value":"VVI"},{"label":"San Antonio Del Tachira Airport ,VE-SVZ","value":"SVZ"},{"label":"Mayor Buenaventura Vivas International Airport ,VE-STD","value":"STD"},{"label":"Santa Bárbara del Zulia Airport ,VE-STB","value":"STB"},{"label":"Luis Munoz Marin International Airport ,PR-SJU","value":"SJU"},{"label":"San Luis Valley Regional Bergman Field ,US-ALS","value":"ALS"},{"label":"Santa Fe Municipal Airport ,US-SAF","value":"SAF"},{"label":"Sultan Khairun Babullah Airport ,ID-TTE","value":"TTE"},{"label":"Sanday Airport ,GB-NDY","value":"NDY"},{"label":"Herrera Airport ,DO-HEX","value":"HEX"},{"label":"Tamarindo De Santa Cruz Airport ,CR-TNO","value":"TNO"},{"label":"Santiago Municipal Airport ,DO-STI","value":"STI"},{"label":"Santa Ana Airport ,SB-NNB","value":"NNB"}
]});


$("#box").keydown(function(event){
    var newEvent = $.Event('keydown', {
        keyCode: event.keyCode
    });

    if (newEvent.keyCode !== $.ui.keyCode.TAB) {
        return;
    }

    newEvent.keyCode = $.ui.keyCode.DOWN;
    $(this).trigger(newEvent);

    newEvent.keyCode = $.ui.keyCode.ENTER;
    $(this).trigger(newEvent);
});

Answer 1

我假设你正在使用jQuery UI Autocomplete？

您可以覆盖自动填充的默认select功能，以填充标签而不是值，如下所示：

select: function(event, ui) {
    event.preventDefault();
    $("#box").val(ui.item.label);
},

请参阅here获取小提琴。

autocomplete tab键应该返回json列表的第一个标签

1 个答案: