exemplo jQuery UI - automaticamente (Autocomplete)
Pesquisar e valor do filtro com base na entrada do usuário, permitindo aos usuários encontrar rapidamente e selecione a partir de uma lista de valores predefinidos.
Para mais detalhes sobre o componente de preenchimento automático, consulte a documentação da API membro automaticamente (o Autocomplete o Widget) .
Use esta seção para search.php de download .
A função padrão
Quando você campo de entrada, feito automaticamente (preenchimento automático) membros prestar aconselhamento. Neste exemplo, proporciona-se uma linguagem de programação opção recomendada, você pode digitar "ja" experimentá-lo, você pode obter Java ou JavaScript.
A fonte de dados é uma matriz simples JavaScript usando uma opções de fonte estão disponíveis para os membros.
<! DOCTYPE html>
<Html lang = "PT">
<Head>
<Charset Meta = "utf-8">
<Title> jQuery UI auto-realização (Autocomplete) - A função padrão </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C ++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Esquema"
];
$ ( "#tags") .autocomplete ({
fonte: availableTags
});
});
</ Script>
</ Head>
<Body>
<Div class = "ui-widget">
<Label for = "tags"> tag: </ label>
<Id de entrada = "tags">
</ Div>
</ Body>
</ Html>
acentuado
campo de preenchimento automático usando as opções de fonte para personalizar os resultados para combinar itens com caracteres acentuados, mesmo se o campo de texto não contêm caracteres acentuados irá corresponder. Mas se você digitar caracteres acentuados em um campo de texto, ele não exibir os resultados de itens não-stress.
Experimente digitar "Jo", você verá "John" e "Jorn", em seguida, digite "Jo", só vai ver "Jorn".
<! DOCTYPE html>
<Html lang = "PT">
<Head>
<Charset Meta = "utf-8">
<Title> jQuery UI auto-realização (Autocomplete) - acentuada </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
nomes var = [ "Jörn Zaefferer", "Scott González", "John Resig"];
var = {accentMap
"A": "a",
"O": "o"
};
var normalize = function (prazo) {
var ret = "";
for (var i = 0; i <term.length; i ++) {
RET = + accentMap [term.charAt (i)] || term.charAt (I);
}
voltar ret;
};
$ ( "#developer") .autocomplete ({
fonte: function (request, response) {
var matcher = new RegExp ($ .ui.autocomplete.escapeRegex (request.term), "i");
resposta ($ .grep (nomes, function (value) {
value = value.label || value.value || valor;
voltar matcher.test (valor) || matcher.test (normalizar (valor));
}));
}
});
});
</ Script>
</ Head>
<Body>
<Div class = "ui-widget">
<Form>
<Label for = "desenvolvedor"> Desenvolvedor: </ label>
<Id de entrada = "desenvolvedor">
</ Form>
</ Div>
</ Body>
</ Html>
classificação
Pesquisa classificação resultado. Experimente digitar "a" ou "n".
<! DOCTYPE html>
<Html lang = "PT">
<Head>
<Charset Meta = "utf-8">
<Title> jQuery UI auto-realização (Autocomplete) - Categoria </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
-.ui-Autocomplete categoria {
font-weight: bold;
padding: .2em .4em;
margin: .8em 0 .2em;
line-height: 1.5;
}
</ Style>
<Script>
$ .widget ( "Custom.catcomplete", $ .ui.autocomplete, {
_renderMenu: function (ul, itens) {
var que = este,
currentCategory = "";
$ .each (Items, função (index, item) {
Se (item.category! = currentCategory) {
ul.append ( "<li class =" ui-autocomplete-categoria '> "+ item.category +" </ li> ");
currentCategory = item.category;
}
that._renderItemData (ul, item);
});
}
});
</ Script>
<Script>
$ (Function () {
dados var = [
{Rótulo: "Anders", categoria: ""},
{Rótulo: "Andreas", categoria: ""},
{Label: "Antal", categoria: ""},
{Label: "annhhx10", categoria "Produtos"},
{Label: "K12 annk", categoria "Produtos"},
{Label: "C13 annttop", categoria "Produtos"},
{Label: "Anders Andersson", categoria "People"},
{Label: "Andreas Andersson", categoria "People"},
{Label: "andreas johnson", categoria "Pessoas"}
];
$ ( "#search") .catcomplete ({
atraso: 0,
fonte: dados
});
});
</ Script>
</ Head>
<Body>
<Label for = "search"> Pesquisa: </ label>
<Id de entrada = "search">
</ Body>
</ Html>
combo box (caixa de combinação)
Um componente personalizado criado pelo Autocomplete e Button. Você pode digitar alguns caracteres para se baseado em seus resultados de filtragem de entrada, ou escolher entre a lista completa com os botões.
A entrada é lido a partir de um elementos select existentes, tendo passado para a opção de Autocomplete para personalizar a fonte.
Este não é um membro perfeita sem suporte. Aqui é simplesmente para demonstrar recursos de personalização de preenchimento automático. Para mais detalhes sobre esta parte trabalhos, clique aqui para visualizar os artigos jQuery.
<! DOCTYPE html>
<Html lang = "PT">
<Head>
<Charset Meta = "utf-8">
<Title> jQuery UI auto-realização (Autocomplete) - caixa de combinação (Combobox) </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
.custom-combobox {
position: relative;
display: inline-block;
}
-.custom-Combobox alternância {
position: absolute;
top: 0;
bottom: 0;
margin-left: -1px;
padding: 0;
/ * Apoio: IE7 * /
* Altura: 1.7em;
* Top: 0.1em;
}
-.custom-Combobox de entrada {
margin: 0;
padding: 0.3em;
}
</ Style>
<Script>
(Function ($) {
$ .widget ( "Custom.combobox", {
_create: function () {
this.wrapper = $ ( "<span>")
.addClass ( "custom-combobox")
.insertAfter (this.element);
this.element.hide ();
this._createAutocomplete ();
this._createShowAllButton ();
},
_createAutocomplete: function () {
var selected = this.element.children ( ": selecionados"),
value = selected.val () selected.text (): "";?
this.input = $ ( "<input>")
.appendTo (this.wrapper)
.val (valor)
.attr ( "title", "")
.addClass ( "custom-combobox-input ui-widget-ui-widget conteúdo-ui-ui-estado padrão-canto esquerdo")
.autocomplete ({
atraso: 0,
minLength: 0,
fonte: $ .proxy (this, "fonte_")
})
.tooltip ({
tooltipClass: "ui-state-destaque"
});
this._on (this.input, {
autocompleteselect: function (evento, ui) {
ui.item.option.selected = true;
this._trigger ( "select", evento, {
artigo: ui.item.option
});
},
autocompletechange: "_removeIfInvalid"
});
},
_createShowAllButton: function () {
input var = this.input,
wasOpen = false;
$ ( "<a>")
.attr ( "tabIndex", -1)
.attr ( "title", "Mostrar todos os itens")
.tooltip ()
.appendTo (this.wrapper)
.button ({
Ícones: {
primária: "ui-icon-triângulo-1-s"
},
texto: false
})
.removeClass ( "ui-canto-all")
.addClass ( "custom-combobox-toggle ui-canto-direito")
.mousedown (function () {
wasOpen = input.autocomplete ( "widget") .é ( ": visível");
})
.click (function () {
input.focus ();
// Se você tem visto é fechado se (wasOpen) {
retornar;
}
// Passa uma cadeia vazia como o valor da pesquisa, mostrando todos os resultados input.autocomplete ( "busca", "");
});
},
fonte_: function (request, response) {
var matcher = new RegExp ($ .ui.autocomplete.escapeRegex (request.term), "i");
resposta (this.element.children ( "Opção") .map (function () {
var text = $ (this) .text ();
if (this.value && (! request.term || matcher.test (texto)))
retornar {
label: texto,
valor: texto,
opção: esta
};
}));
},
_removeIfInvalid: function (evento, ui) {
// Seleciona um item e não executar outras ações if (ui.item) {
retornar;
}
// Pesquisar um jogo (case insensitive)
var value = this.input.val (),
valueLowerCase = value.toLowerCase (),
válido = false;
this.element.children ( "Opção") .each (function () {
if ($ (this) .text (). toLowerCase () === valueLowerCase) {
this.selected = válido = true;
return false;
}
});
// A correspondência for encontrada, nenhuma outra ação if (válido) {
retornar;
}
// Remova o this.input valor inválido
.val ( "")
.attr ( "title", o valor + "não corresponde a qualquer item")
.tooltip ( "abrir");
this.element.val ( "");
this._delay (function () {
this.input.tooltip ( "close") .attr ( "title", "");
}, 2500);
this.input.data ( "ui-autocomplete") .term = "";
},
_destroy: function () {
this.wrapper.remove ();
this.element.show ();
}
});
}) (JQuery);
$ (Function () {
$ ( "#combobox") .combobox ();
$ ( "#toggle") .click (Function () {
$ ( "#combobox") .toggle ();
});
});
</ Script>
</ Head>
<Body>
<Div class = "ui-widget">
<Label> sua linguagem de programação favorita: </ label>
<Id = "combobox">
<Option value = ""> Escolha ... </ option>
<Option value = "ActionScript"> ActionScript </ option>
<Option value = "AppleScript"> AppleScript </ option>
<Option value = "Asp"> Asp </ option>
<Option value = "BASIC"> BASIC </ option>
<Option value = "C"> C </ option>
<Option value = "C ++"> C ++ </ option>
<Option value = "Clojure"> Clojure </ option>
<Option value = "COBOL"> COBOL </ option>
<Option value = "ColdFusion"> ColdFusion </ option>
<Option value = "Erlang"> Erlang </ option>
<Option value = "Fortran"> Fortran </ option>
<Option value = "Groovy"> Groovy </ option>
<Option value = "Haskell"> Haskell </ option>
<Option value = "Java"> Java </ option>
<Option value = "JavaScript"> JavaScript </ option>
<Option value = "Lisp"> Lisp </ option>
<Option value = "Perl"> Perl </ option>
<Option value = "php"> PHP </ option>
<Option value = "Python"> Python </ option>
<Option value = "Ruby"> Rubi </ option>
<Option value = "Scala"> Scala </ option>
<Option value = "Esquema"> Esquema </ option>
</ Select>
</ Div>
<Button id = "toggle"> caixa de seleção com base visor </ button>
</ Body>
</ Html>
dados personalizados e exibição
Você pode usar um formato de dados personalizado e concentrando-se simplesmente substituir o comportamento padrão e selecione para exibir os dados.
Experimente digitar "j", ou pressione a seta para baixo, você pode obter uma lista de itens.
<! DOCTYPE html>
<Html lang = "PT">
<Head>
<Charset Meta = "utf-8">
<Title> jQuery UI auto-realização (Autocomplete) - dados personalizados e exibe </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
# Projeto-label {
display: block;
font-weight: bold;
margin-bottom: 1em;
}
# Projeto-ícone {
float: left;
height: 32px;
width: 32px;
}
# Projeto-descrição {
margin: 0;
padding: 0;
}
</ Style>
<Script>
$ (Function () {
var projectos = [
{
valor: "jquery",
label: "jQuery",
desc: "a escrever menos, fazer mais, biblioteca JavaScript",
icon: "jquery_32x32.png"
},
{
valor: "jquery-ui",
label: "jQuery UI",
desc: "a biblioteca de interface de usuário oficial do jQuery",
icon: "jqueryui_32x32.png"
},
{
valor: "sizzlejs",
label: "Sizzle JS",
desc: "um mecanismo selector puro-JavaScript CSS",
icon: "sizzlejs_32x32.png"
}
];
$ ( "#project") .autocomplete ({
minLength: 0,
fonte: projetos,
foco: function (event, ui) {
$ ( "#project") .val (Ui.item.label);
return false;
},
selecione: function (evento, ui) {
$ ( "#project") .val (Ui.item.label);
$ ( "# Project-id") .val (ui.item.value);
$ ( "# Project-description") .html (ui.item.desc);
$ ( "# Project-ícone") .attr ( "src", "images /" + ui.item.icon);
return false;
}
})
.data ( "ui-autocomplete") ._ RenderItem = function (ul, item) {
retornar $ ( "<li>")
.append ( "<a>" + item.label + "<br>" + item.desc + "</a>")
.appendTo (ul);
};
});
</ Script>
</ Head>
<Body>
<Div id = "projeto-label"> Selecione um item (tipo "j"): </ div>
<Img id = "projeto-ícone" src = "images / transparent_1x1.png" class = "ui-estado-padrão" alt = "">
<Id de entrada = "projeto">
<Input type = "hidden" id = "project-id">
<P id = "projeto-description"> </ p>
</ Body>
</ Html>
vários valores
Uso: Digite alguns caracteres, como "j", você pode ver os resultados das linguagens de programação relevantes. Selecione um valor e, em seguida, digite os caracteres que continuar a acrescentar valor adicional.
Este exemplo demonstra como usar as opções de fonte e eventos para conseguir no valor de um único campo de texto para inserir múltiplos automática.
<! DOCTYPE html>
<Html lang = "PT">
<Head>
<Charset Meta = "utf-8">
<Title> jQuery UI auto-realização (Autocomplete) - vários valores </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Script>
$ (Function () {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C ++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Esquema"
];
separação de funções (val) {
val.split retornar (/ \ s * /);
}
função extractLast (termo) {
split (prazo) retornar .pop ();
}
$ ( "#tags")
// Quando você seleciona um item sem sair do campo de texto .bind ( "keydown", function (event) {
if (event.keyCode === $ .ui.keyCode.TAB &&
$ (Este) .data ( "ui-autocomplete") .menu.active) {
event.preventDefault ();
}
})
.autocomplete ({
minLength: 0,
fonte: function (request, response) {
// Autocomplete de volta, mas para extrair a última resposta de entrada ($ .ui.autocomplete.filter (
availableTags, extractLast (request.term)));
},
foco: function () {
// Impedir a obtenção de valores de inserção foco return false;
},
selecione: function (evento, ui) {
termos var = split (this.value);
// Remover o terms.pop entrada de corrente ();
// Adicione o terms.push opção selecionada (ui.item.value);
// Adicionar um marcador, adicionar uma vírgula no final de + terms.push Space ( "");
this.value = terms.join ( ",");
return false;
}
});
});
</ Script>
</ Head>
<Body>
<Div class = "ui-widget">
<Label for = "tags"> Linguagens de Programação: </ label>
<Input id = "Tag" size = "50">
</ Div>
</ Body>
</ Html>
Vários valores, remoto
Uso: Digite as duas personagens, pelo menos, para obter os nomes de pássaros. Selecione um valor e, em seguida, digite os caracteres que continuar a acrescentar valor adicional.
Este exemplo demonstra como usar as opções de fonte e eventos para conseguir no valor de um único campo de texto para inserir múltiplos automática.
<! DOCTYPE html>
<Html lang = "PT">
<Head>
<Charset Meta = "utf-8">
<Title> jQuery UI auto-realização (Autocomplete) - vários valores, remoto </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
.ui-autocomplete-loading {
background: url branco ( 'images / ui-anim_basic_16x16.gif') centro-direita no-repeat;
}
</ Style>
<Script>
$ (Function () {
separação de funções (val) {
val.split retornar (/ \ s * /);
}
função extractLast (termo) {
split (prazo) retornar .pop ();
}
$ ( "#birds")
// Quando você seleciona um item sem sair do campo de texto .bind ( "keydown", function (event) {
if (event.keyCode === $ .ui.keyCode.TAB &&
$ (Este) .data ( "ui-autocomplete") .menu.active) {
event.preventDefault ();
}
})
.autocomplete ({
fonte: function (request, response) {
$ .getJSON ( "Search.php", {
prazo: extractLast (request.term)
}, Resposta);
},
Pesquisa: function () {
// Personalizado prazo mínimo comprimento var = extractLast (this.value);
Se (term.length <2) {
return false;
}
},
foco: function () {
// Impedir a obtenção de valores de inserção foco return false;
},
selecione: function (evento, ui) {
termos var = split (this.value);
// Remover o terms.pop entrada de corrente ();
// Adicione o terms.push opção selecionada (ui.item.value);
// Adicionar um marcador, adicionar uma vírgula no final de + terms.push Space ( "");
this.value = terms.join ( ",");
return false;
}
});
});
</ Script>
</ Head>
<Body>
<Div class = "ui-widget">
<Label for = "aves"> Bird: </ label>
<Input id = "aves" size = "50">
</ Div>
</ Body>
</ Html>
JSONP fonte de dados remota
Quando você digita caracteres em um campo de texto, componentes de preenchimento automático de dar resultados conselho. Neste exemplo, quando você digitar pelo menos dois caracteres em um campo de texto, ele irá exibir o nome da cidade em questão.
Neste exemplo, a fonte de dados é geonames.org WebService . Embora a escolha de um campo de texto depois de o elemento é o nome da cidade, mas irá exibir mais informações, a fim de encontrar a entrada correcta. Os dados também podem ser uma chamada de retorno, os resultados são exibidos na caixa abaixo.
<! DOCTYPE html>
<Html lang = "PT">
<Head>
<Charset Meta = "utf-8">
<Title> jQuery UI auto-realização (Autocomplete) - fonte de dados remota JSONP </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
.ui-autocomplete-loading {
background: url branco ( 'images / ui-anim_basic_16x16.gif') centro-direita no-repeat;
}
#city {width: 25em;}
</ Style>
<Script>
$ (Function () {
log função (mensagem) {
$ ( "<Div>") .text (mensagem) .prependTo ( "#log");
$ ( "#log") .scrollTop (0);
}
$ ( "#city") .autocomplete ({
fonte: function (request, response) {
$ .ajax ({
url: "http://ws.geonames.org/searchJSON",
dataType: "jsonp",
Dados: {
featureClass: "P",
Estilo: "full",
maxRows: 12,
name_startsWith: request.term
},
sucesso: function (data) {
resposta ($ .map (data.geonames, function (item) {
retornar {
label: item.name + (item.adminName1 "," + item.adminName1 :? "") + "," + item.countryName,
valor: item.name
}
}));
}
});
},
minLength: 2,
selecione: function (evento, ui) {
log (ui.item?
"Selected:" + ui.item.label:
"Nada selecionado, a entrada foi" + this.value);
},
abrir: function () {
$ (Este) .removeClass ( "ui-canto-all") .addClass ( "ui-corner-top");
},
close: function () {
$ (Este) .removeClass ( "ui-corner-top") .addClass ( "ui-canto-all");
}
});
});
</ Script>
</ Head>
<Body>
<Div class = "ui-widget">
<Label for = "city"> sua cidade: </ label>
<Id de entrada = "cidade">
Alimentado por <a href="http://geonames.org" target="_blank"> geonames.org </a>
</ Div>
<Div class = "ui-widget" style = "margin-top: 2em; font-family: Arial">
resultados:
<Div id = "log" style = "height: 200px; width: 300px; overflow: auto;" class = "ui-widget-content"> </ div>
</ Div>
</ Body>
</ Html>
A fonte de dados remota
Quando você digita caracteres em um campo de texto, componentes de preenchimento automático de dar resultados conselho. Neste exemplo, quando você digitar pelo menos dois caracteres em um campo de texto, ele irá exibir os nomes relevantes de aves.
Neste exemplo, a fonte de dados é devolvido roteiro do lado do servidor de dados JSON para especificar um simples opções de fonte. Além disso, a opção minLength é definido como 2, para evitar a consulta retorna muitos resultados, selecione o evento para exibir algum feedback.
<! DOCTYPE html>
<Html lang = "PT">
<Head>
<Charset Meta = "utf-8">
<Title> jQuery UI auto-realização (Autocomplete) - fonte de dados remota </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
.ui-autocomplete-loading {
background: url branco ( 'images / ui-anim_basic_16x16.gif') centro-direita no-repeat;
}
</ Style>
<Script>
$ (Function () {
log função (mensagem) {
$ ( "<Div>") .text (mensagem) .prependTo ( "#log");
$ ( "#log") .scrollTop (0);
}
$ ( "#birds") .autocomplete ({
fonte: "search.php",
minLength: 2,
selecione: function (evento, ui) {
log (ui.item?
"Selected:" + ui.item.value + "ou" + ui.item.id:
"Nada selecionado, a entrada foi" + this.value);
}
});
});
</ Script>
</ Head>
<Body>
<Div class = "ui-widget">
<Label for = "aves"> Bird: </ label>
<Id de entrada = "aves">
</ Div>
<Div class = "ui-widget" style = "margin-top: 2em; font-family: Arial">
resultados:
<Div id = "log" style = "height: 200px; width: 300px; overflow: auto;" class = "ui-widget-content"> </ div>
</ Div>
</ Body>
</ Html>
esconderijo remoto
Quando você digita caracteres em um campo de texto, componentes de preenchimento automático de dar resultados conselho. Neste exemplo, quando você digitar pelo menos dois caracteres em um campo de texto, ele irá exibir os nomes relevantes de aves.
Para melhorar o desempenho, adicione aqui um cache local poucos, outros exemplos de fontes de dados remotas semelhantes. Aqui, apenas salvou um cache de consultas, eo cache pode ser estendido para vários valores, cada entrada é um valor.
<! DOCTYPE html>
<Html lang = "PT">
<Head>
<Charset Meta = "utf-8">
<Title> jQuery UI auto-realização (Autocomplete) - Cache remoto </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
.ui-autocomplete-loading {
background: url branco ( 'images / ui-anim_basic_16x16.gif') centro-direita no-repeat;
}
</ Style>
<Script>
$ (Function () {
cache de var = {};
$ ( "#birds") .autocomplete ({
minLength: 2,
fonte: function (request, response) {
prazo var = request.term;
if (termo em cache) {
resposta (cache [termo]);
retornar;
}
$ .getJSON ( "Search.php", pedido, função (dados, status, xhr) {
cache de [prazo] = dados;
resposta (de dados);
});
}
});
});
</ Script>
</ Head>
<Body>
<Div class = "ui-widget">
<Label for = "aves"> Bird: </ label>
<Id de entrada = "aves">
</ Div>
</ Body>
</ Html>
resultado de rolagem
Ao exibir uma longa lista de opções, você pode simplesmente definir max-height para impedir menu de preenchimento automático para exibir o menu também. Experimente digitar "a" ou "s" para obter o resultado de uma longa lista de rolagem.
<! DOCTYPE html>
<Html lang = "PT">
<Head>
<Charset Meta = "utf-8">
<Title> jQuery UI auto-realização (Autocomplete) - resultado de rolagem </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
.ui-autocomplete {
max-height: 100px;
overflow-y: auto;
/ * Impedir a barra de rolagem horizontal * /
overflow-x: hidden;
}
/ * IE 6 não suporta o max-height
* Nós usamos em vez de altura, mas isso vai forçar o menu é sempre apresentada como a altura * /
* Html .ui-autocomplete {
height: 100px;
}
</ Style>
<Script>
$ (Function () {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C ++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Esquema"
];
$ ( "#tags") .autocomplete ({
fonte: availableTags
});
});
</ Script>
</ Head>
<Body>
<Div class = "ui-widget">
<Label for = "tags"> tag: </ label>
<Id de entrada = "tags">
</ Div>
</ Body>
</ Html>
dados XML
Este exemplo mostra como obter alguns dados XML e usa o método jQuery para resolvê-lo e fornecê-lo a completar automaticamente como fonte de dados.
Este exemplo também ser usado como resolver uma referência de fonte de dados XML remoto - Análise ocorrer a cada solicitação de origem de chamada de retorno.
<! DOCTYPE html>
<Html lang = "PT">
<Head>
<Charset Meta = "utf-8">
<Title> jQuery UI auto-conclusão (Autocomplete) - dados XML </ title>
<Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
<Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
<Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
<Style>
.ui-autocomplete-loading {background: url branco ( 'images / ui-anim_basic_16x16.gif') centro-direita no-repeat;}
</ Style>
<Script>
$ (Function () {
log função (mensagem) {
$ ( "<Div />") .text (mensagem) .prependTo ( "#log");
$ ( "#log") .attr ( "ScrollTop", 0);
}
$ .ajax ({
url: "london.xml",
dataType: "xml",
success: function (xmlResponse) {
var data = $ ( "geoname", xmlResponse) .map (function () {
retornar {
Valor: $ ( "nome", isto) .text () + "," +
($ .trim ($ ( "CountryName", this) .text ()) || "(desconhecido país)"),
id: $ ( "geonameId", this) .text ()
};
.}) Get ();
$ ( "#birds") .autocomplete ({
fonte: dados,
minLength: 0,
selecione: function (evento, ui) {
log (ui.item?
"Selected:" + ui.item.value + ", geonameId:" + ui.item.id:
"Nada selecionado, a entrada foi" + this.value);
}
});
}
});
});
</ Script>
</ Head>
<Body>
<Div class = "ui-widget">
<Label for = "aves"> Londres Jogo: </ label>
<Id de entrada = "aves">
</ Div>
<Div class = "ui-widget" style = "margin-top: 2em; font-family: Arial">
resultados:
<Div id = "log" style = "height: 200px; width: 300px; overflow: auto;" class = "ui-widget-content"> </ div>
</ Div>
</ Body>
</ Html>