javascript - custom - Autocompletar Sin jQuery UI
jquery ui autocomplete (7)
Estoy usando jQuery en mi proyecto y necesito implementar autocompletar, pero me gustaría evitar incluir el widget de jQuery UI y, con suerte, usar algún complemento externo específico. ¿Podría por favor proporcionar algunos ejemplos / enlace? Tengo que consultar una fuente JSON remota que devuelve parejas clave-valor.
Aquí hay un pequeño complemento de autocompletado escrito por mí, por favor intente: https://github.com/Fischer-L/autoComplt
Porque no estoy usando jQuery y no quiero incluir algunas librerías grandes solo para una característica, escribo para mí.
Este complemento no depende de otras bibliotecas y no tiene que incluir otro CSS, por lo que basta con incluir un script JS.
PD: Si lo usa y encuentra algo que necesita ser mejorado, por favor dígame :)
Comencé a escribir un complemento para auto completar / mencionar en Javascript simple. Aún no he terminado, pero podría ser un buen punto de partida.
Este es el mejor complemento de autocompletado de múltiples categorías / funciones que he visto, contiene muchas características y te brinda control total sobre 40 parámetros para personalizarlo como desees. Es muy dinámico y proporciona entradas en varios idiomas con detección automática para idiomas RTL o LTR.
No usa la JQuery y el código es muy liviano y muy limpio.
La página de demostración: http://www.muwakaba.com/plugins/autocomplete
Puede usarlo con diferentes configuraciones en la página de demostración y ver todos los parámetros y las características.
¡Buena suerte!
No es necesario incluir JQuery ni ninguna otra biblioteca de terceros.
IP_autoComplete función IP_autoComplete automáticamente el valor del campo a la URL (primer parámetro). Por ejemplo, el cuadro de texto tiene un valor neeraj luego se arrjson.php?Name=neeraj .
También puede usar la función IP_autocomplete para el valor estático. Solo agregue el signo # una vez al comenzar en su cadena (coma por separado). Por ejemplo: "# val1, val2, val3"
arrjson.php debería devolver la cadena codificada json.
HTML:
<script type="text/javascript" src="http://services.iperfect.net/js/IP_generalLib.js">
Cuerpo
<input type="text" name="testautocomplete" id="testautocomplete" onkeypress="IP_autoComplete(''arrjson.php?Name='',this.id,event)">
O simplemente puedes dar estática:
<input type="text" name="testneeraj" id="testneeraj" onkeyup="IP_autoComplete(''#sachin bhalake,ishwar agam,mohsin khan,neeraj dhekale,sheetal dhekale,ajay bhalake'',this.id,event)">
Prueba esto, esto te ayudará.
HTML
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags" />
</div>
JS
$(function() {
var availableTags = [
"ActionScript", "AppleScript","Asp","BASIC","C","C++","Clojure",
"COBOL","ColdFusion","Erlang","Fortran","Groovy","Haskell","Java",
"JavaScript","Lisp","Perl","PHP","Python","Ruby","Scala","Scheme"
];
$( "#tags" ).autocomplete({
source: availableTags
});
});
Violín here
Puede usar el atributo de "lista" de HTML5 en el cuadro de texto de entrada y proporcionarle una lista personalizada de valores mediante el uso de la lista de datos.
<!DOCTYPE html>
<html>
<head>
<!--your stuff-->
</head>
<body>
<!--your stuff-->
<input type="text" id="txtAutoComplete" list="languageList"/><!--your input textbox-->
<datalist id="languageList">
<option value="HTML" />
<option value="CSS" />
<option value="JavaScript" />
<option value="SQL" />
<option value="PHP" />
<option value="jQuery" />
<option value="Bootstrap" />
<option value="Angular" />
<option value="ASP.NET" />
<option value="XML" />
</datalist>
</body>
</html>
Si no lo obtuvo, lea más en http://www.cheezycode.com/2015/09/create-auto-complete-dropdown-using.html
También hay un video para él. Autocompletar sin JQuery.
Puede utilizar el complemento Ajax Autocomplete para jQuery
Y aquí está la documentación completa.
Código
GUIÓN
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.devbridge-autocomplete/1.2.24/jquery.autocomplete.min.js"></script>
<script>
a1 = $(''#query'').autocomplete({
width: 448,
delimiter: /(,|;)/s*/,
lookup: ''Andorra,Azerbaijan,Bahamas,Bahrain,Benin,Bhutan,Bolivia,Bosnia Herzegovina,Botswana,Brazil,Brunei,Bulgaria,Burkina, Burundi,Cambodia,Cameroon,Canada,Cape Verde,Central African Rep,Chile,China,Colombia,Comoros,Congo,Congo {Democratic Rep},Costa Rica,Croatia,Cuba,Cyprus,Czech Republic,Denmark,Djibouti,East Timor,Ecuador,Egypt,El Salvador,Equatorial Guinea,Eritrea,Fiji,France,Georgia,Germany,Ghana,Greece,Grenada,Guatemala,Guinea,Guinea-Bissau,Guyana,Haiti,Honduras,Hungary,India,Iraq,Ireland {Republic},Ivory Coast,Jamaica,Japan,Kazakhstan,Kiribati,Korea North,''.split('','')
});
</script>
CSS
.text-field {
-moz-box-sizing: border-box;
border: 1px solid #EEEEEE;
font-family: "Source Sans Pro",Arial,sans-serif;
font-size: 0.73684em;
font-weight: 600;
height: 37px;
margin: 0;
padding: 5px;
width: 100%;
}
.autocomplete-suggestion {
overflow: hidden;
padding: 2px 5px;
white-space: nowrap;
}
.autocomplete-suggestions strong {
color: #3399FF;
font-weight: normal;
}
.autocomplete-selected{
background:#F0F0F0;
}
HTML
<input type="text" id="query" class="text-field valid" autocomplete="off" placeholder="Search here">
He creado una demo de autocomplete aquí es el enlace jsbin.com