angular-autocomplete-resource

=============================

Directiva de autocomplete para recursos (ngResources) de Angular. Utiliza bootstrap y underscorejs.

Instalación

• Instalar módulo

   bower install --save autocomplete-resource

• incluir el módulo en la aplicación:

angular
  .module('testAutocompleteApp', [
    'ngResource',
    'ngSanitize',
    'ngTouch',
    'autocomplete-resource'
  ]);

• Incluir (si no se incluyó en la instalación con grunt o gulp):

<link rel="stylesheet" href="bower_components/autocomplete-resource/dist/stylesheets/autocomplete-resource.css" />

<script src="bower_components/autocomplete-resource/dist/autocomplete-resource.js"></script>

Dependencias

• Angular
• Underscorejs
• Bootstrap

Ejemplo de uso

<autocomplete-resource 
    isrequired="true" 
    itemicon="glyphicon glyphicon-tag" 
    requiredmsj="" 
    itemdescrip="texto" 
    idautocomplete="" 
    classautocomplete="form-control" 
    label="Test" 
    placeholder="Ciudades" 
    itemlabel="descripcion" model="model.ciudad" 
    modelsourcename="TestService" 
    serviceatributefiltername="search">
    </autocomplete-resource>

Configuración

Atributo	Descripción	tipo	bindeo
label	Label del autocomplete	String	'@'
itemlabel	Nombre de atributo dentro del recurso, utilizado para el label de cada registro del autocomplete. Soporta sub atributos, ejemplo: ciudad.descripción	String	'@'
itemdescrip	Nombre de atributo dentro del recurso, utiizado para la descripción de cada registro del autocomplete.	String	'@'
itemdescrip2	Nombre de atributo dentro del recurso, utiizado para una segunda descripción de cada registro del autocomplete.	String	'@'
idautocomplete	id asignado al autocomplete dentro del DOM	String	'@'
classautocomplete	clase asignada al autocomplete dentro del DOM	String	'@'
placeholder	Placeholder del input del autocomplete	String	'@'
isrequired	El input es requerido	Object binded	'='
requiredmsj	Mensaje en caso de no estar completo el input y ser requerido	String	'@'
model	Modelo bindeado al recurso que se selecciona en el autocomplete	Object	'='
modelsourcename	Nombre del recurso de angular (será inyectado luego por la directiva), utilizado para hacer el request. Utiliza el metodo query del recurso.	String	'@'
clearInputOnSelection	Borra el input al seleccionar un item. (quedará bindeado en model	Boolean	'@'
itemicon	Icono de bootstrap utilizado en cada item del autocomplete.	String	'@'
serviceatributefiltername	Nombre de variable enviado para la búsqueda. Por ejemplo, si se utiliza term, y se escribe en el imput "abc" el request será enviado con un parámetro get, ?term=abc	String	'@'
onSelect	Función de callback ejecutada al seleccionar un item de la lista. ej: onSelection(item). Item es el item seleccionado.	function	'='
onRemove	Función de callback ejecutada al desseleccionar un item de la lista. ej: onRemove().	function	'='
prefilters	Filtros extras enviados en el método query del recurso. Estos pueden ser bindeados a objetos fuera de la directiva. Por ejemplo otro select externo para elegir el país. El autocomplete harà el get con el filtro del pais elegido desde el controllador que utiliza la directiva.	Object	'='
ngdisabled	Expresión para determinar si el input esta desabilitado o habilitado.	Expression	'='
resultsin	Determina en que atributo del json de respuesta, viene la colección para el autocomplete. (django rest: results {total:...,results:[...]}. Si este atributo no se setea, buscara un array si la respuesta es un array, o un array dentro de .results, si la respuesta es un objeto.	String	'@'
wrap-text	Determina si el texto de cada item se corta (ellipsis) o hace wrap en cada renglon.	Boolean	'@'
item-detail	Determina si se ve el item elegido como ultimo elemento del autocomplete, con la descripcion entera.	Boolean	'@'
popover-detail	Determina si se ve el popover con el detalle del item	Boolean	'@'
popover-detail-placement	Determina donde se ubica el popover detail (left,right,top,left)	String	'@'
showarrowbtn	Determina si se muestra el boton de la flecha para desplegar la lista sin filtrar	Boolean	'@'
labelsininput	Determina si se muestran los labels separados por coma en el inpit, ej: labelsininput="descripcion, texto, texto2"	Boolean	'@'
withtooltip	Determina si se muestra un tooltip con los atributos	Boolean	'@'
tooltipplacement	Determina posicion del tooltip	String	'@'
input-size	Tamaño del input ('lg, sm), si no se especifica es tamaño default'	String	'@'
modelsourcefunction	Function del recurso de angular que será ejecutada, ejemplo query (default: query)	String	'@'
searchtext	Modelo en donde sera bindeado el texto de busqueda	String	'='
clear-input-on-blur	Especifica si se borra el texto de busqueda al hacer blur del autocomplete	String	'@'
interval-wait-to-call	Delay en milisegundos para llamar al servicio una vez que el modelo deja de cambiar	String	'@'
imgItemPreviewSrcAttrib	nombre de atributo en el resultado que se usa para el src de un preview de imagen	String	'@'
appendString	string que agregamos al search	String	'@'
read-only	Booleano bindeado al recurso para determinar si es readonly	Object	'='

Demo

En /example:

1. npm install
2. bower install
3. grunt serve