首先的先是，css样式了
.ui-autocomplete {
padding: 0;
list-style: none;
background-color: #fff;
width: 218px;
border: 1px solid #B0BECA;
max-height: 350px;
overflow-y: scroll;
}
.ui-autocomplete .ui-menu-item a {
border-top: 1px solid #B0BECA;
display: block;
padding: 4px 6px;
color: #353D44;
cursor: pointer;
}
.ui-autocomplete .ui-menu-item:first-child a {
border-top: none;
}
.ui-autocomplete .ui-menu-item a.ui-state-hover {
background-color: #D5E5F4;
color: #161A1C;
}
首先要引用三个js文件，
<
script
src
=/static/js/jquery-1.7.1.min.js
>
script
>
< script type ="text/javascript" src ="/static/js/jquery.select-to-autocomplete.js" > script >
< script type ="text/javascript" src ="/static/js/jquery-ui-autocomplete.js" > script >
< script type ="text/javascript" src ="/static/js/jquery.select-to-autocomplete.js" > script >
< script type ="text/javascript" src ="/static/js/jquery-ui-autocomplete.js" > script >
其次在html页面上放入，下面一大段代码，
接着在js文件里写上，
$(
function(){
$("#country_selector").selectToAutocomplete();
})
$("#country_selector").selectToAutocomplete();
})
下面的代码包含，取得国家对应的国家code和currency方法
$("#add_country").click(
function(){
var index = $("#country_selector").get(0).selectedIndex;
var currency = $($("#country_selector").get(0).options[index]).attr("data-currency");
var country = $("#country_selector").val();
if(country != ""){
var short_country = $($("#country_selector").get(0).options[index]).attr("data-alternative-spellings");
var position_blankspace = short_country.indexOf(" ");
short_country =(position_blankspace==-1) ? short_country : short_country.substring(0,position_blankspace);
// console.log(short_country);
// console.log(currency);
var $row_country_currency = $(''+short_country+' Delete
$("#countryTable").append($row_country_currency);
}
else{
alert("no country!");
}
});
var index = $("#country_selector").get(0).selectedIndex;
var currency = $($("#country_selector").get(0).options[index]).attr("data-currency");
var country = $("#country_selector").val();
if(country != ""){
var short_country = $($("#country_selector").get(0).options[index]).attr("data-alternative-spellings");
var position_blankspace = short_country.indexOf(" ");
short_country =(position_blankspace==-1) ? short_country : short_country.substring(0,position_blankspace);
// console.log(short_country);
// console.log(currency);
var $row_country_currency = $('
$("#countryTable").append($row_country_currency);
}
else{
alert("no country!");
}
});
20121026更新
该项目的原作者地址在
https://github.com/JamieAppleseed/selectToAutocomplete我只是在其html代码上，增加data-currency属性。
还有一点就是，把这么一整段html代码放在页面上肯定不好，得封装在js文件里比较好。