Page MenuHomePhabricator
Paste P3995

completion search demo from mwv labs instance
ActivePublic

Authored by EBernhardson on Sep 7 2016, 8:35 PM.
Tags
None
Referenced Files
F4440932: completion search demo from mwv labs instance
Sep 7 2016, 8:35 PM
Subscribers
None
<html>
<head>
<!-- <script src="https://code.jquery.com/jquery-2.2.4.js"></script> -->
<script>mwPerformance = { mark: function () {} };</script>
<script src="http://mw-sug-subpages-relforge.wmflabs.org/w/load.php?debug=false&lang=en&modules=jquery&only=scripts"></script>
<style>
.container {
display: flex;
}
.container > div {
flex-grow: 1;
}
</style>
</head>
<h2>Completion Demo</h2>
<div>
<select id="wiki">
<option value="mediawiki">mediawiki.org</option>
<option value="enwikisource">en.wikisource.org</option>
</select>
<input id="search" />
</div>
<div class="container">
<div>
<h4>Normal</h4>
<div id="normal"></div>
</div>
<div>
<h4>Sub Page</h4>
<div id="subpage"></div>
</div>
<div>
<h4>Sub Phrase</h4>
<div id="subphrase"></div>
</div>
</div>
<script>
$(document).ready(function () {
var currentCall = 0,
sources = {
mediawiki: {
normal: 'https://mediawiki.org/',
subpage: 'http://mw-sug-subpages-relforge.wmflabs.org/',
subphrase: 'http://mw-sug-anywords-relforge.wmflabs.org/'
},
enwikisource: {
normal: 'https://en.wikisource.org/',
subpage: 'http://en-wsrc-sug-subpages-relforge.wmflabs.org/',
subphrase: 'http://en-wsrc-sug-anywords-relforge.wmflabs.org/'
}
};
function req($el, host, val, callNumber) {
$el.children().remove();
$.ajax({
dataType: 'jsonp',
url: host + 'w/api.php',
data: {
action: 'opensearch',
format: 'json',
limit: 10,
search: val
}
}).then( function (data) {
var i,
results = data[1];
if ( currentCall == callNumber ) {
for (var i in results) {
if (results.hasOwnProperty(i)) {
$('<div>').text(results[i]).appendTo($el)
}
}
}
});
}
$('#wiki').on('change', function () {
$('#search').trigger('input');
});
$('#search').on('input', function () {
var id,
val = $(this).val(),
source = $('#wiki').val();
currentCall += 1;
for(id in sources[source]) {
if (sources[source].hasOwnProperty(id)) {
req($('#' + id), sources[source][id], val, currentCall);
}
}
});
});
</script>
</html>