2017  Kodetalk | Feedback | Privacy Policy | Terms | About
userimage

Best plugin to create chip autocomplete in materialize css

I tried to implement autocomplete chip of materialized css. Anybody have idea the best plugin for create a autocomplete chip that i can populate by using server call.

userimage

The best plugin could be:

https://icefox0801.github.io/materialize-autocomplete/examples/

Now using this as a autocomplete server call to populate data you can use below code:


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Auto Complete</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href='<c:url value="/resources/css/materialize.min.css" />'
	rel='stylesheet' type="text/css" media="screen,projection">
</head>
<body>
	<div class="container">
		<div class="row">
			<h1 class="col s12">Materialize-Auto Complete</h1>
			<form class="col s12">
				<div class="row">
					<div class="input-field col s12">
						<div class="autocomplete" id="multiple">
							<div class="ac-users"></div>
							<div class="ac-input">
								<input type="text" id="multipleInput"
									placeholder="Please input some letters"
									data-activates="multipleDropdown" data-beloworigin="true"
									autocomplete="off">
							</div>
							<ul id="multipleDropdown" class="dropdown-content ac-dropdown"></ul>
							<input type="hidden" name="multipleHidden" />
						</div>
						<label class="active" for="multipleInput">Multiple
							autocomplete: </label>
					</div>
				</div>
			</form>
		</div>
	</div>
	<script src='<c:url value="/resources/js/jquery-3.2.0.min.js" />'></script>
	<script src='<c:url value="/resources/js/materialize.min.js" />'></script>
	<script src='<c:url value="/resources/js/jquery.materialize-autocomplete.min.js" />'></script>
</body>
</html>

$(function() {
	var multiple = $('#multipleInput').materialize_autocomplete({
		multiple : {
			enable : true
		},
		appender : {
			el : '.ac-users'
		},
		dropdown : {
			el : '#multipleDropdown'
		},
		getData : function(value, callback) {
			getDataOnDemand(value, callback);
		}
	});
});

function getDataOnDemand(value,callback){
	$.post(call URL, {
		inputData : value
	}, function(data) {
		callback(value, data);
	});
}
Answer is