首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >使用国家/地区的JQuery自动完成

使用国家/地区的JQuery自动完成
EN

Stack Overflow用户
提问于 2016-02-05 23:04:33
回答 2查看 863关注 0票数 0

我正在尝试在jquery中使用国家代码进行自动补全。我使用这个code作为例子。在我的站点中,它工作得非常好,但是值以列表的形式出现在输入的前面,而不像站点中的示例。我不能在jsfiddle上运行它,但这是my code。谢谢你!

代码语言:javascript
运行
复制
var countries = {
    "Argentina (AR)":"AR",
    "United States (US)":"US",
    "Comoros": "KM",
    "Congo (Brazzaville)": "CG",
    "Congo, Democratic Republic of the": "CD",
    "Cook Islands":  "CK",
    "Costa Rica":  "CR",
    "Côte d'Ivoire": "CI",
    "Croatia": "HR",
    "Cuba":  "CU",
    "Cyprus":  "CY",
    "Czech Republic":  "CZ",
    "Denmark": "DK",
    "Djibouti":  "DJ",
    "Dominica":  "DM",
    "Dominican Republic":  "DO",
};

$( "#countryCodes" )
// don't navigate away from the field on tab when selecting an item
.bind( "keydown", function( event ) {
            if ( event.keyCode === $.ui.keyCode.TAB && $( this ).autocomplete( "instance" ).menu.active ) {
                event.preventDefault();
            }
        })
.autocomplete({
        minLength: 0,
        source: function( request, response ) {
            // delegate back to autocomplete, but extract the last term
            response( $.ui.autocomplete.filter(
            Object.keys(countries), extractLast( request.term ) ) );
        },
        focus: function() {
            // prevent value inserted on focus
            return false;
        },
        select: function( event, ui ) {
            var terms = split( this.value );
            // remove the current input
            terms.pop();
            // add the selected item
            terms.push( countries[ui.item.value] );
            // add placeholder to get the comma-and-space at the end
            terms.push( "" );
            this.value = terms.join( "," );
            return false;
        }
    });
EN

回答 2

Stack Overflow用户

发布于 2016-02-05 23:48:21

小提琴中缺少exactLast函数。我添加了现在和这里,现在它可以在小提琴中工作

代码语言:javascript
运行
复制
function extractLast( term ) {
      return split( term ).pop();
    }

https://jsfiddle.net/px2dmd1o/1/

检查并让我知道你的问题是什么

票数 1
EN

Stack Overflow用户

发布于 2016-02-05 23:20:23

一种解决方案是为自动补全提供源数组。jQuery的自动完成功能要求源数组包含具有labelvalue属性的对象。您可以在定义countries对象后构建此数组,例如:

代码语言:javascript
运行
复制
var mySource = Object.keys(countries).map(function(country) {
  return { 
    label: country, 
    value: countries[country] 
  };
});

然后,...and将其提供给autocomplete:

代码语言:javascript
运行
复制
$('#countryCodes').autocomplete({
  source: mySource
});

为了让您的小提琴运行,我必须注释掉您传递给自动完成小部件的其余内容,因为它有一些未定义的函数。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/35227276

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档