How to make the success of a javascript plugin

Question

How to make the success of a javascript plugin

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I try to make an autocomplete plugin without using any libraries other than jquery and bootstrap. Well my question is as follows.

I would like to return the value when I click on the autocomplete drop-down and then the data that returns me to manipulate it something like ajax.

An example:

$(miInputId).ItsaAutocomplete({<br>
     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;source:myArray<br>
})<br>
.success(function(response){<br>
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log(response)<br>
});

I would appreciate your help, thank you

javascript jquery

asked by Guillermo Juica 14.06.2018 в 21:48

source

2 answers

send data to a form of a page from android? My PLC does not give me an IP inside my local network

score 0 · Answer 1

hmm not necessarily my code is the following and it is exactly in the success where I want to receive the value but when I want to show it in a console.log I do not bounce anything.

(function($){
	var oldget = $.fn.get;
	$.fn.extend({
	    autocomplete 	: function (options = new Array()) {
	    	let caja_id = 'autocomplete-'+this[0].id;
	    	var that = this;
	    	this.__create(that,caja_id)
	    	this.__hover(that,caja_id)
	    	this.__click(that,caja_id)
	    	this.__keys(that,options,caja_id)
			return this
	    },
	    __create 		: function(that,caja_id){
	    	$(that).attr('autocomplete', 'off');
	    	var myTextBox 			= $(that);
	    	var element_width 		= $(that).width() + 18;
	    	var element_height 		= $(that).height() + 10;
	    	var element_coordenadas = $(that).offset();
			$('body').append('<div class="autocomplete-panel" id="'+caja_id+'"><ul class="list-group"></ul></div>');
							
			$('#'+caja_id).width(element_width);
			$('#'+caja_id).offset({top:element_coordenadas.top + element_height,left:element_coordenadas.left});
	    },
	    __keys 			: function(that,options,caja_id){
	    	$(that).keyup(function(event) {
				$('#'+caja_id+' .list-group').empty();
				var myText 		= $(that).val();
				var mySearch 	= '';
				var n = 1;
				$.each(options.source, function(index, val) {		
					mySearch 	= val;
					let myReg 	= new RegExp(myText.toUpperCase() + '(\n.*)*');
					let myMatch = (mySearch.toUpperCase()).match(myReg);
					if (myMatch){
						var res = (mySearch).toUpperCase().replace(myText.toUpperCase(), "<strong>"+myText.toUpperCase()+"</strong>");
						$('#'+caja_id+' .list-group').append('<li class="list-group-item list-group-item-'+n+(n==1 ? ' active' : '')+'" data-position="'+n+'" data-catacter="'+mySearch+'">'+res+'</li>');
						n++;
					}
				});
			});
	    },
	    __hover 		: function(that,caja_id){
	    	$(document).on('mouseover', '#'+caja_id+' .list-group .list-group-item', function(event) {
		        var position = $(this).data('position');
				$('#'+caja_id+' .list-group .list-group-item').removeClass( "active" );
				$('#'+caja_id+' .list-group .list-group-item-'+position).addClass( "active" );
			});
	    },
	    __click 		: function(that,caja_id){
	    	$(document).on('click', '#'+caja_id+' .list-group .list-group-item', function(event) {
				var datos = [];
				$.each($(this).data(), function(index, val) {
					datos.push(val);
					$(that).val(datos[1]);
				});
		        $('#'+caja_id+' .list-group').empty();
		        that.success(that,datos);
			});
	    },
	    success 		: function(that,datos){
	    	var ret = oldget.apply(that, arguments);
	    	return ret;
	    }
	});
})(jQuery);

	var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
	$('#txtautocomplete').autocomplete({
		source:availableTags,
	}).success(function(response){
		console.log(response);
	});

score 0 · Answer 2

Autocomplete using boostrap , jquery and jquery-ui .

This is not a solution of its own. The reference Here .

$(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
  });
});

.ui-autocomplete {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  list-style: none;
  font-size: 14px;
  text-align: left;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  background-clip: padding-box;
}

.ui-autocomplete > li > div {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.42857143;
  color: #333333;
  white-space: nowrap;
}

.ui-state-hover,
.ui-state-active,
.ui-state-focus {
  text-decoration: none;
  color: #262626;
  background-color: #f5f5f5;
  cursor: pointer;
}

.ui-helper-hidden-accessible {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

<head>
  <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>

  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>

</head>
<div class="container">
  <h1>jQuery UI Autocomplete with Bootstrap Styling</h1>
  <form>
    <div class="form-group">
      <label for="tags">Tags</label>
      <input type="text" class="form-control" id="tags">
    </div>
  </form>
</div>