hackpoint/plugin/part/js/component.js

function init_components_part(input){
		if(input.is(":visible")) {
			var partPicker = input.clone();

			input.before(partPicker);
			if(input.parent().hasClass("input-group")){
				input.parent().after(input.detach());
				input.before('<div id="part-anchor" class="dropdown-anchor"></div>');
			}
			input.hide();
			partPicker.addClass('data-type-part').removeAttr("data-type").removeAttr('name').removeAttr('id').removeAttr('onchange');
			partPicker.attr('data-source',input.attr('id'));
		}else{
			partPicker = $('[data-source="'+input.attr('id')+'"]');
		}

		
			

		input.change(function(){
			partPicker.prop('disabled',true).val('Chargement...');
			$.action({
				action : 'get_part_by_id',
				id : input.val(),
		
				before : input.attr('data-before'),
			},function(r){
				partPicker.prop('disabled',input.prop('disabled'));
				if(r.part && r.part.label){
					partPicker.val(r.part.label);
				}else{
					partPicker.val('');
				}
			});
		});


		if(input.val() !=''){
			partPicker.prop('disabled',true).val('Chargement...');
			$.action({
				action : 'get_part_by_id',
				id : input.val(),
				
				before : input.attr('data-before'),
			},function(r){
				partPicker.prop('disabled',input.prop('disabled'));
				if(r.part && r.part.label){
					partPicker.val(r.part.label);
				}else{
					partPicker.val('');
				}
			});
		}
		
		
		partPicker.keyup(function(){
			input.val('');
		});
		var parent = input.attr('data-parent');
		partPicker.autocomplete({
			action : 'autocomplete_part',
			data : {
			
				before : input.attr('data-before'),
				parent:function(){ return $(parent).val(); }
			},
			skin : function(item){
				var html = '';
					name = item.name;
				/*var re = new RegExp(partPicker.val(),"gi");

				name = item.name.replace(re, function (x) {
					return '<strong>'+x+'</strong>';
				});*/

				html += '<div class="part-logo d-inline mr-2"><img src="data:'+item.picture+'" class="avatar-mini avatar-rounded"></div>'; 
				html += '<div class="user-infos d-inline"><span>'+name+'</span>'; 
				html += '<div class="clear"></div>';
				
				return html;
			},
			highlight : function(item){
						return item;
			},
			onClick : function(selected,element){
				console.log(selected,element);
				var li = $(element).closest('li');
				li.attr('data-part',selected.id);
				li.find('.price input').val(selected.price);
				li.find('.brand input').val(selected.brand);
				li.find('.part-image').css('background','url(data:'+selected.picture+') 0% 0% / cover');
				li.find('.part-image').attr('data-stream','data:'+selected.picture);
				input.val(selected.id);
				input.trigger('change');
			},
			onBlur : function(selected,element){
				if(input.attr('data-force')!='false' && input.val()=='') partPicker.val('');
				if(partPicker.val()=='') {
					input.val('');
				}
				input.trigger('blur');
			}
		});
}