<head>
<!--         Wijmo Dependencies       -->
<!--Theme-->
<link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" />

<!--Wijmo Widgets CSS-->
<link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20153.83.min.css" rel="stylesheet" type="text/css" />

<!--RequireJs-->
<script type="text/javascript" src="http://cdn.wijmo.com/external/require.js"></script>

<!--Config Jquery for Wijmo-->
<script type="text/javascript">
    requirejs.config({
        baseUrl: "http://cdn.wijmo.com/amd-js/3.20153.83",
            paths: {
                "jquery": "jquery-1.11.1.min",
                "jquery-ui": "jquery-ui-1.11.0.custom.min",
                "jquery.ui": "jquery-ui",
                "jquery.mousewheel": "jquery.mousewheel.min",
                "globalize": "globalize.min"
            }
    });
</script>
<!--         End Wijmo Dependencies       -->

<!--		 Setup Wijmo ComboBox		  -->
<script>
require(["wijmo.wijcombobox"], function () {
        $(document).ready(function () {
            $("#Wikipedia_ComboBox").wijcombobox({
                data: [{
                    label: 'Please start typing to get suggestions.',
                    value: 'null'
                }]
            });
			$("#Wikipedia_ComboBox").wijcombobox({
				select : function(){afterSelection()}
			});
			$("#Wikipedia_ComboBox").wijcombobox("option","autoComplete",false); //turn off auto-complete
			$("#Wikipedia_ComboBox").wijcombobox("option","forceSelectionText",false);
        });
    });
</script>
<!--			End WijmoComboBox Setup				-->
<meta charset="utf-8">
<title>Sample Wijmo ComboBox with dynamic AJAX data</title>
</head>

<body>
<input id="Wikipedia_ComboBox" placeholder="Type to Search and Use Dropdown" class="wijmo-wijcombobox wijcombobox" style="width:500px; height:50px;"/>

<div id="Entry_Selection">
<div>Here is the link of your selected Wikipedia entry: </div>
<div id="Wikipedia_Link_Area"><a href="null" target="_blank" id="Wikipedia_Link">Entry Link</a></div>
</div>
</body>
var dynamicData = [];

function jsonp(url, callback) {
    var callbackName = 'jsonp_callback_' + Math.round(100000 * Math.random());
    window[callbackName] = function(data) {
        delete window[callbackName];
        document.body.removeChild(script);
        callback(data);
    };

    var script = document.createElement('script');
    script.src = url + (url.indexOf('?') >= 0 ? '&' : '?') + 'callback=' + callbackName;
    document.body.appendChild(script);
}

function handleAjaxResponse(input){
	var temp = document.getElementById("Wikipedia_ComboBox").value;
	dynamicData = []; // reset our data source before filling it with resopnse
	for (x = 0; x < input[1].length; x++){
		dynamicData.push({"label": input[1][x].toString(), "value": input[3][x].toString()});
	}
	$("#Wikipedia_ComboBox").wijcombobox({
		data: dynamicData
	});
	document.getElementById("Wikipedia_ComboBox").value = temp; // Necessary for a stupid reason; manipulating the data for the combobox seems to reset the input field, which we don't want
}

function afterSelection(){
	setTimeout(function(){ // setTimeout is necessary to avoid strange results due to wijmo/ajax delay 
		console.log("An entry has been selected");
		var Wiki_Link = document.getElementById("Wikipedia_Link");
		Wiki_Link.href = $("#Wikipedia_ComboBox").wijcombobox("option","selectedValue");
		Wiki_Link.innerHTML =  document.getElementById("Wikipedia_ComboBox").value;
	},500);
	
}

document.getElementById("Wikipedia_ComboBox").onkeyup = function (){
	var query = this.value;
	var URL = "https://en.wikipedia.org/w/api.php?format=json&action=opensearch&limit=10&search="+encodeURI(query);
	jsonp(URL,function(data){handleAjaxResponse(data);});
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.