Skip to content

Instantly share code, notes, and snippets.

@merqlove

merqlove/app.html

Last active January 9, 2017 15:42
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save merqlove/27351c47a58f7a09ecbe33aac8363545 to your computer and use it in GitHub Desktop.
Save merqlove/27351c47a58f7a09ecbe33aac8363545 to your computer and use it in GitHub Desktop.
Download ZIP
Autocomplete Address with Semantic UI
Raw
app.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Autocomplete address With Semantic UI</title>
<link rel="stylesheet" href="semantic/dist/semantic.css">
</head>
<body>
<div class="ui very padded text container">
<form class="ui form" id="form">
<h1>Search for address</h1>
<div class="ui search focus">
<div class="ui icon input">
<input class="prompt" type="text" placeholder="Street..." autocomplete="off">
<i class="search icon"></i>
</div>
<div class="results"></div>
</div>
</form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
<script src="semantic/dist/semantic.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
$('.ui.search').search({
apiSettings: {
responseAsync: function(settings, callback) {
var query = settings.urlData.query;
ymaps.suggest(query).then(function (items) {
callback({results: items});
});
},
stateContext: 'input'
},
searchFullText: false,
minCharacters : 3,
fields: {title: 'displayName', category: 'type'}
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment