XPagesAndMore

Option Public
Dim session As notessession
Dim db As notesdatabase
Dim winner As notesdocument
Dim loser As notesdocument
Dim coll As notesdocumentcollection
Dim doc As notesdocument
Dim w_item As Variant
Dim l_item As Variant

XPagesAndMore

Sub Initialize
	Dim session As New NotesSession
	Dim db As NotesDatabase
	Dim fileName As String
	Dim fileNum As Integer
	Dim headerstring As String
	Dim values As String
	Dim selection As String
	Dim collection As NotesDocumentCollection
	Dim doc As NotesDocument

XPagesAndMore

Sub Initialize

	Dim session As New NotesSession
	Dim db As NotesDatabase
	Dim fileName As String
	Dim fileNum As Integer
	Dim headerstring As String
	Dim values As String
	Dim selection As String
	Dim collection As NotesDocumentCollection

XPagesAndMore

If JQuery-UI autocomplete is beging used there is a need for bootstrap styling.
In the example I created a custom.css file and add the following CSS (don't forget to add the stylesheet to the XPage or Custom Control).


.ui-autocomplete {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  float: left;

XPagesAndMore

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
	xmlns:xc="http://www.ibm.com/xsp/custom">
	<xp:this.resources>
		<xp:script src="/JQueryXSnippet.js" clientSide="true"></xp:script>
	</xp:this.resources>
	<link rel="stylesheet" href="ms/magicsuggest.css" />
	<script src="ms/magicsuggest.js"></script>	
	<xp:scriptBlock id="scriptBlock2">
		<xp:this.value><![CDATA[

XPagesAndMore

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
 	<xp:this.properties>
        <xp:parameter name="xsp.resources.aggregate" value="false" />
    </xp:this.properties>
	<xp:this.data>
		<xp:dominoDocument var="document1" formName="Contact"></xp:dominoDocument>
	</xp:this.data>
	<xp:this.resources>			
		<!-- temporary redefine define.amd object  (Dojo AMD loader) -->

XPagesAndMore

if (typeof define === 'function' && define._amd) {define.amd = define._amd; delete define._amd;}

XPagesAndMore

if (typeof define === 'function' && define.amd) {if(define.amd.vendor =='dojotoolkit.org'){define._amd = define.amd;delete define.amd;}}

XPagesAndMore

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">	
	<xp:this.data>
		<xp:dominoDocument var="document1" formName="Contact"></xp:dominoDocument>
	</xp:this.data>
	<script type="text/javascript" src="disable_amd.js" clientSide="true"></script>
	<script type="text/javascript" src="select2v4/js/select2.js" clientSide="true"></script>		
	<script type="text/javascript" src="enable_amd.js" clientSide="true"></script>	
	<link rel="stylesheet" href="select2v4/css/select2.css" />
	<xp:panel>

XPagesAndMore

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xc="http://www.ibm.com/xsp/custom">
<script type="text/javascript" src="bootbox/bootbox.js"></script>
<xc:ccLayoutBootstrap><xp:this.facets>
<xp:panel xp:key="facetMiddle">
<xp:br></xp:br>
<xp:button value="Bootbox Dialog" id="button1" styleClass="btn btn-success">
	<xp:eventHandler event="onclick" submit="false">
		<xp:this.script><![CDATA[bootbox.dialog({