Latest web development tutorials

jQuery UI ejemplo - de forma automática (Autocompletar)

Búsqueda y valor de filtro basan en la entrada del usuario, permitiendo a los usuarios buscar y seleccionar de una lista de valores preestablecidos rápidamente.

Para más detalles sobre el componente de autocompletar, consulte la documentación de la API miembro de forma automática (la de autocompletar el widget) .

Utilice esta sección para descarga search.php .

La función predeterminada

Al campo de entrada, realiza de forma automática (Autocompletar) miembros proporcionan consejos. En este ejemplo, se proporciona un lenguaje de programación opción recomendada, puede introducir "ja" probarlo, puede obtener Java o JavaScript.

La fuente de datos es un simple matriz de JavaScript utilizando una fuente de opciones están disponibles para miembros.

<! DOCTYPE html>
<Html lang = "es">
<Head>
  <Charset Meta = "UTF-8">
  <Título> jQuery UI auto-realización (Autocompletar) - La función por defecto </ 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 () {
    availableTags var = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C ++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Maravilloso",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Esquema"
    ];
    $ ( "#tags") .autocomplete ({
      Fuente: availableTags
    });
  });
  </ Script>
</ Head>
<Cuerpo>
 
<Div class = "ui-widget de">
  <Label for = "tag"> etiqueta: </ label>
  <Entrada id = "tag">
</ Div>
 
 
</ Body>
</ Html>

acentuado

campo de autocompletar usando las opciones de fuente para personalizar los resultados para que coincida con elementos con caracteres acentuados, incluso si el campo de texto no contiene caracteres acentuados coincidirá. Pero si escribe los caracteres acentuados en un campo de texto, que no muestra los resultados de las partidas no estrés.

Pruebe a escribir "Jo", que se ve "John" y "Jorn", a continuación, escriba "Jo", sólo verá "Jorn".

<! DOCTYPE html>
<Html lang = "es">
<Head>
  <Charset Meta = "UTF-8">
  <Título> jQuery UI auto-realización (Autocompletar) - acentuado </ 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 names = [ "Jörn Zaefferer", "de Scott González", "John Resig"];
 
    accentMap var = {
      "A": "a",
      "O": "O"
    };
    var normalizar = function (expresión) {
      var ret = "";
      for (var i = 0; i <term.length; i ++) {
        ret + = accentMap [term.charAt (i)] || term.charAt (i);
      }
      ret regresar;
    };
 
    $ ( "#developer") .autocomplete ({
      fuente: function (petición y respuesta) {
        var matcher = new RegExp ($ .ui.autocomplete.escapeRegex (request.term), "i");
        respuesta ($ .grep (nombres, la función (valor) {
          valor = value.label || || value.value valor;
          volver matcher.test (valor) || matcher.test (normalizar (valor));
        }));
      }
    });
  });
  </ Script>
</ Head>
<Cuerpo>
 
<Div class = "ui-widget de">
  <Forma>
  <Label for = "desarrollador"> Desarrollador: </ label>
  <Entrada id = "desarrollador">
  </ Form>
</ Div>
 
 
</ Body>
</ Html>

clasificación

Búsqueda de la clasificación de resultados. Pruebe a escribir "a" o "n".

<! DOCTYPE html>
<Html lang = "es">
<Head>
  <Charset Meta = "UTF-8">
  <Título> jQuery UI auto-realización (Autocompletar) - Categoría </ 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>
  categoría .ui-autocompletar-{
    font-weight: bold;
    padding: .2em .4em;
    Margen: 0 .8em .2em;
    line-height: 1.5;
  }
  </ Style>
  <Script>
  $ .widget ( "Custom.catcomplete", $ .ui.autocomplete, {
    _renderMenu: function (ul, artículos) {
      var = que esto,
        currentCategory = "";
      $ Each (artículos, función (índice, elemento) {
        si (item.category! = currentCategory) {
          ul.append ( "<li class =" ui-autocompletar-categoría '> "+ item.category +" </ li> ");
          currentCategory = item.category;
        }
        that._renderItemData (ul, elemento);
      });
    }
  });
  </ Script>
  <Script>
  $ (Function () {
    = Var data [
      {Label: "Anders", categoría: ""},
      {Label: "Andreas", categoría: ""},
      {Label: "Antal", categoría: ""},
      {Label: "annhhx10", categoría: "Productos"},
      {Label: "annk K12", categoría: "Productos"},
      {Label: "annttop C13", categoría: "Productos"},
      {Label: "Anders Andersson", categoría: "People"},
      {Label: "Andreas Andersson", categoría: "People"},
      {Label: "Andreas Johnson", categoría: "La gente"}
    ];
 
    $ ( "#search") .catcomplete ({
      retardo: 0,
      fuente: datos
    });
  });
  </ Script>
</ Head>
<Cuerpo>
 
<Label for = "buscar"> Buscar: </ label>
<Entrada id = "buscar">
 
 
</ Body>
</ Html>

cuadro combinado (ComboBox)

Un componente personalizado creado por el Autocompletar y Button. Puede escribir algunos caracteres que obtiene basadas en los resultados de filtrado de entrada, o elegir de la lista completa con los botones.

La entrada se lee de un elementos de selección existentes, después de haber dado a la opción de autocompletar para personalizar la fuente.

Esto no es un miembro de perfecto no compatible. Aquí es simplemente para mostrar las características de personalización de autocompletar. Para más detalles acerca de esta parte funciona, por favor haga clic aquí para ver los artículos de jQuery.

<! DOCTYPE html>
<Html lang = "es">
<Head>
  <Charset Meta = "UTF-8">
  <Título> jQuery UI auto-realización (Autocompletar) - cuadro combinado (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-cuadro combinado {
    position: relative;
    display: inline-block;
  }
  .custom-cuadro combinado de palanca-{
    position: absolute;
    top: 0;
    parte inferior: 0;
    margin-left: 1px;
    padding: 0;
    / * Soporte: Internet Explorer 7 * /
    * Altura: 1.7em;
    * Inicio: 0.1em;
  }
  .custom-combobox de entrada {
    margin: 0;
    padding: 0.3em;
  }
  </ Style>
  <Script>
  (Function ($) {
    $ .widget ( "Custom.combobox", {
      _create: function () {
        this.wrapper = $ ( "<span>")
          .addClass ( "costumbre-cuadro combinado")
          .insertAfter (this.element);
 
        this.element.hide ();
        this._createAutocomplete ();
        this._createShowAllButton ();
      },
 
      _createAutocomplete: function () {
        var = this.element.children seleccionado ( ": seleccionados"),
          valor = selected.val () selected.text (): "";?
 
        this.input = $ ( "<input>")
          .appendTo (this.wrapper)
          .val (valor)
          .attr ( "título", "")
          .addClass ( "costumbre-cuadro combinado de entrada-ui-ui-widget de widget de contenido-ui-estado predeterminado de ui-esquina-izquierda")
          .autocomplete ({
            retardo: 0,
            minLength: 0,
            fuente: $ .proxy (esto "_source")
          })
          .tooltip ({
            tooltipClass: "ui-estado más destacado"
          });
 
        this._on (this.input, {
          autocompleteselect: function (event, ui) {
            ui.item.option.selected = true;
            this._trigger ( "seleccionar", evento, {
              material: ui.item.option
            });
          },
 
          autocompletechange: "_removeIfInvalid"
        });
      },
 
      _createShowAllButton: function () {
        de entrada var = this.input,
          wasOpen = false;
 
        $ ( "<a>")
          .attr ( "tabIndex", -1)
          .attr ( "título", "Todos los productos del")
          .tooltip ()
          .appendTo (this.wrapper)
          .button ({
            Iconos: {
              primaria: "ui-icon-triángulo-1-s"
            },
            Texto: falsa
          })
          .removeClass ( "ui-esquina-all")
          .addClass ( "costumbre-cuadro combinado de palanca-ui-esquina-derecha")
          .mousedown (function () {
            wasOpen = input.autocomplete ( "widget") .IS ( "Visible");
          })
          .click (function () {
            input.focus ();
 
            // Si ha visto está cerrado si (wasOpen) {
              volver;
            }
 
            // Pasar una cadena vacía como el valor de la búsqueda, que muestra todos los resultados input.autocomplete ( "buscar", "");
          });
      },
 
      _source: function (petición y respuesta) {
        var matcher = new RegExp ($ .ui.autocomplete.escapeRegex (request.term), "i");
        respuesta (this.element.children ( "opción") .map (function () {
          var texto = $ (this) .text ();
          si (this.value && (! request.term || matcher.test (texto)))
            volver {
              etiqueta: texto,
              Valor: texto,
              opción: este
            };
        }));
      },
 
      _removeIfInvalid: function (event, ui) {
 
        // Selecciona un elemento y no realizar otras acciones if (ui.item) {
          volver;
        }
 
        // Búsqueda de una coincidencia (mayúsculas y minúsculas)
        var = valor this.input.val (),
          valueLowerCase = value.toLowerCase (),
          válido = false;
        this.element.children ( "opción") .Cada (function () {
          if ($ (this) .text (). toLowerCase () === valueLowerCase) {
            this.selected = válida = true;
            return false;
          }
        });
 
        // Se encuentra una coincidencia, si ninguna otra acción (válido) {
          volver;
        }
 
        // Eliminar el valor no válido this.input
          .val ( "")
          .attr ( "título", el valor + "no encontró ningún elemento")
          .tooltip ( "abrir");
        this.element.val ( "");
        this._delay (function () {
          this.input.tooltip ( "cerrar") .attr ( "título", "");
        }, 2500);
        this.input.data ( "ui-autocompletar") .term = "";
      },
 
      _destroy: function () {
        this.wrapper.remove ();
        this.element.show ();
      }
    });
  }) (JQuery);
 
  $ (Function () {
    $ ( "#combobox") .combobox ();
    $ ( "#toggle") .click (Function () {
      $ ( "#combobox") .toggle ();
    });
  });
  </ Script>
</ Head>
<Cuerpo>
 
<Div class = "ui-widget de">
  <Label> su lenguaje de programación favorito: </ label>
  <Select id = "cuadro combinado">
    <Option value = ""> Elegir ... </ 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 = "maravilloso"> 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"> Rubí </ option>
    <Option value = "Scala"> Scala </ option>
    <Option value = "Esquema"> Esquema </ option>
  </ Select>
</ Div>
<Botón id = "cambiar"> caja de exhibición de la selección basada </ botón>
 
 
</ Body>
</ Html>

los datos personalizados y pantalla

Se puede utilizar un formato de datos personalizado, y centrándose simplemente reemplazar el comportamiento por defecto y seleccionar la visualización de los datos.

Pruebe a escribir "j", o pulse la tecla de flecha hacia abajo, se puede obtener una lista de elementos.

<! DOCTYPE html>
<Html lang = "es">
<Head>
  <Charset Meta = "UTF-8">
  <Título> jQuery UI auto-realización (Autocompletar) - datos personalizados y las pantallas </ 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>
  # Proyecto de etiqueta {
    display: block;
    font-weight: bold;
    margin-bottom: 1 em;
  }
  # Proyecto-icono {
    float: left;
    altura: 32px;
    Ancho: 32px;
  }
  # Proyecto-Descripción {
    margin: 0;
    padding: 0;
  }
  </ Style>
  <Script>
  $ (Function () {
    proyectos var = [
      {
        valor: "jQuery",
        etiqueta: "jQuery",
        desc: "la escritura menos, hacer más, biblioteca de JavaScript",
        Icono: "jquery_32x32.png"
      },
      {
        valor: "jquery-ui",
        etiqueta: "jQuery UI",
        desc: "la biblioteca de interfaz de usuario oficial de jQuery",
        Icono: "jqueryui_32x32.png"
      },
      {
        valor: "sizzlejs",
        etiqueta: "JS chisporroteo",
        desc: "un motor de selección pura-JavaScript CSS",
        Icono: "sizzlejs_32x32.png"
      }
    ];
 
    $ ( "#project") .autocomplete ({
      minLength: 0,
      fuente: proyectos,
      centrarse: function (event, ui) {
        $ ( "#project") .val (Ui.item.label);
        return false;
      },
      seleccionar: function (event, ui) {
        $ ( "#project") .val (Ui.item.label);
        $ ( "# Project-id") .val (ui.item.value);
        $ ( "# Proyecto de hechos») .html (ui.item.desc);
        $ ( "# Proyecto-icono") .attr ( "src", "images /" + ui.item.icon);
 
        return false;
      }
    })
    .data ( "ui-autocompletar") ._ renderItem = function (ul, elemento) {
      devolver $ ( "<li>")
        .Append ( "<a>" + + item.label "<br>" + + item.desc "</a>")
        .appendTo (UL);
    };
  });
  </ Script>
</ Head>
<Cuerpo>
 
<Div id = "proyecto de etiqueta"> Seleccione un elemento (tipo "J"): </ div>
<Img id = "proyecto-icono" src = "images / transparent_1x1.png" class = alt "ui-estado-default" = "">
<Entrada id = "proyecto">
<Input type = "hidden" id = "project-id">
<P id = "proyecto-description"> </ p>
 
 
</ Body>
</ Html>

Los valores múltiples

Uso: Escriba algunos caracteres, como "j", se puede ver los resultados de los lenguajes de programación pertinentes. Seleccionar un valor y, a continuación, escribe los caracteres continúan agregando valor adicional.

Este ejemplo muestra cómo utilizar las opciones de fuente y eventos de lograr en el valor de un solo campo de texto para introducir múltiples automática.

<! DOCTYPE html>
<Html lang = "es">
<Head>
  <Charset Meta = "UTF-8">
  <Título> jQuery UI auto-realización (Autocompletar) - varios 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 () {
    availableTags var = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C ++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Maravilloso",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Esquema"
    ];
    función de división (val) {
      val.split volver (/, \ s * /);
    }
    extractLast función (expresión) {
      split (plazo) volver .pop ();
    }
 
    $ ( "") #tags
      // Cuando se selecciona un elemento sin salir del campo de texto .bind ( "keydown", function (event) {
        si (event.keyCode === $ && .ui.keyCode.TAB
            $ (Este) .data ( "ui-autocompletar") .menu.active) {
          event.preventDefault ();
        }
      })
      .autocomplete ({
        minLength: 0,
        fuente: function (petición y respuesta) {
          // Volver autocompletar, pero para extraer la última respuesta de entrada ($ .ui.autocomplete.filter (
            availableTags, extractLast (request.term)));
        },
        centrarse: function () {
          // Prevenir la obtención de los valores de inserción de enfoque return false;
        },
        seleccionar: function (event, ui) {
          términos var = split (this.value);
          // Eliminar el terms.pop entrada de corriente ();
          // Añadir el terms.push opción seleccionada (ui.item.value);
          // Añadir un marcador de posición, agregue una coma al final de terms.push Espacio + ( "");
          this.value = terms.join ( ",");
          return false;
        }
      });
  });
  </ Script>
</ Head>
<Cuerpo>
 
<Div class = "ui-widget de">
  <Label for = "tags"> Lenguajes de Programación: </ label>
  <Entrada de id = tamaño de "etiquetas" = "50">
</ Div>
 
 
</ Body>
</ Html>

Los valores múltiples, a distancia

Uso: Escribe las dos caracteres como mínimo, para obtener los nombres de las aves. Seleccionar un valor y, a continuación, escribe los caracteres continúan agregando valor adicional.

Este ejemplo muestra cómo utilizar las opciones de fuente y eventos de lograr en el valor de un solo campo de texto para introducir múltiples automática.

<! DOCTYPE html>
<Html lang = "es">
<Head>
  <Charset Meta = "UTF-8">
  <Título> jQuery UI auto-realización (Autocompletar) - varios valores, a distancia </ 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-autocompletar de carga {
    background: url blanco ( 'images / ui-anim_basic_16x16.gif') derecho y central no-repeat;
  }
  </ Style>
  <Script>
  $ (Function () {
    función de división (val) {
      val.split volver (/, \ s * /);
    }
    extractLast función (expresión) {
      split (plazo) volver .pop ();
    }
 
    $ ( "") #birds
      // Cuando se selecciona un elemento sin salir del campo de texto .bind ( "keydown", function (event) {
        si (event.keyCode === $ && .ui.keyCode.TAB
            $ (Este) .data ( "ui-autocompletar") .menu.active) {
          event.preventDefault ();
        }
      })
      .autocomplete ({
        fuente: function (petición y respuesta) {
          $ .getJSON ( "Search.php", {
            plazo: extractLast (request.term)
          }, Respuesta);
        },
        Búsqueda: function () {
          // Encargo plazo mínimo de duración var = extractLast (this.value);
          si (term.length <2) {
            return false;
          }
        },
        centrarse: function () {
          // Prevenir la obtención de los valores de inserción de enfoque return false;
        },
        seleccionar: function (event, ui) {
          términos var = split (this.value);
          // Eliminar el terms.pop entrada de corriente ();
          // Añadir el terms.push opción seleccionada (ui.item.value);
          // Añadir un marcador de posición, agregue una coma al final de terms.push Espacio + ( "");
          this.value = terms.join ( ",");
          return false;
        }
      });
  });
  </ Script>
</ Head>
<Cuerpo>
 
<Div class = "ui-widget de">
  <Label for = "aves"> Bird: </ label>
  <Entrada de id = tamaño "pájaros" = "50">
</ Div>
 
 
</ Body>
</ Html>

JSONP fuente de datos remota

Al escribir caracteres en un campo de texto, componentes Autocompletar dan resultados asesoramiento. En este ejemplo, cuando se escribe por lo menos dos caracteres en un campo de texto, se mostrará el nombre de la ciudad correspondiente.

En este ejemplo, la fuente de datos se geonames.org WebService . Aunque la elección de un campo de texto después de que el elemento es el nombre de la ciudad, pero se mostrará más información con el fin de encontrar la entrada correcta. Los datos también pueden ser una devolución de llamada, los resultados se muestran en el cuadro de abajo.

<! DOCTYPE html>
<Html lang = "es">
<Head>
  <Charset Meta = "UTF-8">
  <Título> jQuery UI auto-realización (Autocompletar) - fuente de datos 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-autocompletar de carga {
    background: url blanco ( 'images / ui-anim_basic_16x16.gif') derecho y central no-repeat;
  }
  #city {width: 25em;}
  </ Style>
  <Script>
  $ (Function () {
    función log (mensaje) {
      $ ( "<Div>") .text (mensaje) .prependTo ( "#log");
      $ ( "#log") .scrollTop (0);
    }
 
    $ ( "#city") .autocomplete ({
      fuente: function (petición y respuesta) {
        $ .ajax ({
          url: "http://ws.geonames.org/searchJSON",
          Tipo de datos: "jsonp",
          Datos: {
            FEATURECLASS: "P",
            estilo: "lleno",
            maxRows: 12,
            name_startsWith: request.term
          },
          el éxito: function (datos) {
            respuesta ($ .map (data.geonames, función (elemento) {
              volver {
                etiqueta: item.name + (item.adminName1 "," + item.adminName1 :? "") + "," + item.countryName,
                Valor: item.name
              }
            }));
          }
        });
      },
      minLength: 2,
      seleccionar: function (event, ui) {
        log (ui.item?
          "Seleccionado:" + ui.item.label:
          "No hay nada seleccionado, la entrada era" + this.value);
      },
      abrir: function () {
        $ (Este) .removeClass ( "ui-esquina-all") .addClass ( "ui-esquina-top");
      },
      Cerrar: function () {
        $ (Este) .removeClass ( "ui-esquina-top") .addClass ( "ui-esquina-all");
      }
    });
  });
  </ Script>
</ Head>
<Cuerpo>
 
<Div class = "ui-widget de">
  <Label for = "ciudad"> tu ciudad: </ label>
  <Entrada id = "ciudad">
  Desarrollado por <a target="_blank"> href="http://geonames.org" geonames.org </a>
</ Div>
 
<Div class = "ui-widget de" style = "margin-top: 2em; font-family: Arial">
  resultados:
  <Id = Div estilo "log" = "height: 200px; ancho: 300px; overflow: auto;" class = "ui-widget de contenido"> </ div>
</ Div>
 
 
</ Body>
</ Html>

La fuente de datos remota

Al escribir caracteres en un campo de texto, componentes Autocompletar dan resultados asesoramiento. En este ejemplo, cuando se escribe por lo menos dos caracteres en un campo de texto, se mostrará los nombres correspondientes de las aves.

En este ejemplo, la fuente de datos se devuelve JSON script del lado del servidor de datos para especificar un simple opciones de fuente. Además, la opción de minLength se establece en 2, para evitar la consulta devuelve demasiados resultados, seleccione el evento para mostrar una cierta regeneración.

<! DOCTYPE html>
<Html lang = "es">
<Head>
  <Charset Meta = "UTF-8">
  <Título> jQuery UI auto-realización (Autocompletar) - origen de datos 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-autocompletar de carga {
    background: url blanco ( 'images / ui-anim_basic_16x16.gif') derecho y central no-repeat;
  }
  </ Style>
  <Script>
  $ (Function () {
    función log (mensaje) {
      $ ( "<Div>") .text (mensaje) .prependTo ( "#log");
      $ ( "#log") .scrollTop (0);
    }
 
    $ ( "#birds") .autocomplete ({
      Fuente: "search.php",
      minLength: 2,
      seleccionar: function (event, ui) {
        log (ui.item?
          "Seleccionado:" + + ui.item.value "también conocido como" + ui.item.id:
          "No hay nada seleccionado, la entrada era" + this.value);
      }
    });
  });
  </ Script>
</ Head>
<Cuerpo>
 
<Div class = "ui-widget de">
  <Label for = "aves"> Bird: </ label>
  <Entrada id = "pájaros">
</ Div>
 
<Div class = "ui-widget de" style = "margin-top: 2em; font-family: Arial">
  resultados:
  <Id = Div estilo "log" = "height: 200px; ancho: 300px; overflow: auto;" class = "ui-widget de contenido"> </ div>
</ Div>
 
 
</ Body>
</ Html>

caché remota

Al escribir caracteres en un campo de texto, componentes Autocompletar dan resultados asesoramiento. En este ejemplo, cuando se escribe por lo menos dos caracteres en un campo de texto, se mostrará los nombres correspondientes de las aves.

Para mejorar el rendimiento, añadir aquí unos cuantos caché local, otros ejemplos de fuentes de datos remotas similares. Aquí, sólo se salvó un caché de consultas, y la caché se puede extender a varios valores, cada entrada es un valor.

<! DOCTYPE html>
<Html lang = "es">
<Head>
  <Charset Meta = "UTF-8">
  <Título> jQuery UI auto-realización (Autocompletar) - Caché 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-autocompletar de carga {
    background: url blanco ( 'images / ui-anim_basic_16x16.gif') derecho y central no-repeat;
  }
  </ Style>
  <Script>
  $ (Function () {
    caché var = {};
    $ ( "#birds") .autocomplete ({
      minLength: 2,
      fuente: function (petición y respuesta) {
        plazo var = request.term;
        si (término en la memoria caché) {
          respuesta (caché [término]);
          volver;
        }
 
        $ .getJSON ( "Search.php", petición, la función (datos, estado, xhr) {
          caché [término] = datos;
          de respuesta (datos);
        });
      }
    });
  });
  </ Script>
</ Head>
<Cuerpo>
 
<Div class = "ui-widget de">
  <Label for = "aves"> Bird: </ label>
  <Entrada id = "pájaros">
</ Div>
 
 
</ Body>
</ Html>

resultado desplazable

Cuando se muestra una larga lista de opciones, sólo tiene que establecer max-height para evitar menú de autocompletar para visualizar el menú. Pruebe a escribir "a" o "s" para obtener el resultado de una larga lista desplazable.

<! DOCTYPE html>
<Html lang = "es">
<Head>
  <Charset Meta = "UTF-8">
  <Título> jQuery UI auto-realización (Autocompletar) - resultado de desplazamiento </ 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-autocompletar {
    max-height: 100px;
    desbordamiento-y: auto;
    / * Evitar que la barra de desplazamiento horizontal * /
    desbordamiento-x: hidden;
  }
  / * IE 6 no es compatible con el max-height
   * Utilizamos lugar de altura, pero esto forzará el menú siempre se muestra como la altura * /
  * HTML .ui-autocompletar {
    altura: 100px;
  }
  </ Style>
  <Script>
  $ (Function () {
    availableTags var = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C ++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Maravilloso",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Esquema"
    ];
    $ ( "#tags") .autocomplete ({
      Fuente: availableTags
    });
  });
  </ Script>
</ Head>
<Cuerpo>
 
<Div class = "ui-widget de">
  <Label for = "tag"> etiqueta: </ label>
  <Entrada id = "tag">
</ Div>
 
 
</ Body>
</ Html>

datos XML

Este ejemplo muestra cómo obtener algunos datos XML y utiliza el método jQuery para resolverlo y proporcionarla a autocompletar como origen de datos.

Este ejemplo también ser utilizado como referencia la resolución de un XML fuente de datos remota - Análisis ocurrir a cada solicitud de devolución de llamada de origen.

<! DOCTYPE html>
<Html lang = "es">
<Head>
  <Charset Meta = "UTF-8">
  <Title> jQuery UI auto-realización (Autocompletar) - datos 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-autocompletar de carga {background: url blanco ( 'images / ui-anim_basic_16x16.gif') derecho y central no-repeat;}
  </ Style>
  <Script>
  $ (Function () {
    función log (mensaje) {
      $ ( "<Div />") .text (mensaje) .prependTo ( "#log");
      $ ( "#log") .attr ( "ScrollTop", 0);
    }
 
    $ .ajax ({
      url: "london.xml",
      Tipo de datos: "xml",
      el éxito: la función (xmlResponse) {
        var data = $ ( "geoname", xmlResponse) .map (function () {
          volver {
            valor: $ ( "nombre", esto) .text () + "," +
              ($ .trim ($ ( "Nombre del País", este) .text ()) || "(país desconocido)"),
            id: $ ( "geonameId", esto) .text ()
          };
        .}) Get ();
        $ ( "#birds") .autocomplete ({
          fuente: datos,
          minLength: 0,
          seleccionar: function (event, ui) {
            log (ui.item?
              "Seleccionado:" + + ui.item.value ", geonameId:" + ui.item.id:
              "No hay nada seleccionado, la entrada era" + this.value);
          }
        });
      }
    });
  });
  </ Script>
</ Head>
<Cuerpo>
 
<Div class = "ui-widget de">
  <Label for = "aves"> London Match: </ label>
  <Entrada id = "pájaros">
</ Div>
 
<Div class = "ui-widget de" style = "margin-top: 2em; font-family: Arial">
  resultados:
  <Id = Div estilo "log" = "height: 200px; ancho: 300px; overflow: auto;" class = "ui-widget de contenido"> </ div>
</ Div>
 
 
</ Body>
</ Html>