add suggestor #80

src/main/webapp/WEB-INF/view/help.jsp

@@ -26,9 +26,11 @@
 		</p>
 		<jsp:include page="footer.jsp" />
 	</div>
+	<input type="hidden" id="contextPath" value="<%=request.getContextPath()%>" />
 	<script type="text/javascript"
 		src="${f:url('/js/jquery-1.8.3.min.js')}"></script>
-	<script type="text/javascript" src="${f:url('/js/help.js')}"></script>
 	<script type="text/javascript" src="${f:url('/js/bootstrap.js')}"></script>
+	<script type="text/javascript" src="${f:url('/js/suggestor.js')}"></script>
+	<script type="text/javascript" src="${f:url('/js/help.js')}"></script>
 </body>
 </html>

src/main/webapp/js/help.js

 $(function(){
 	var $searchButton = $('#searchButton');
+	var contextPath = $('#contextPath').val();
 
 	$('#searchForm').on('submit', function(e) {
 		$searchButton.attr('disabled', true);
@@ -15,4 +16,30 @@ $(function(){
 		$('#numSearchOption option').removeProp('selected');
 		return false;
 	});
+
+    $('#query').suggestor( {
+        ajaxinfo: {
+            url: contextPath + '/json',
+            fn: 'content',
+            num: 10
+        },
+        boxCssInfo: {
+            border: '1px solid rgba(82, 168, 236, 0.5)',
+            '-webkit-box-shadow': '0 1px 1px 0px rgba(0, 0, 0, 0.1), 0 3px 2px 0px rgba(82, 168, 236, 0.2)',
+            '-moz-box-shadow': '0 1px 1px 0px rgba(0, 0, 0, 0.1), 0 3px 2px 0px rgba(82, 168, 236, 0.2)',
+            'box-shadow': '0 1px 1px 0px rgba(0, 0, 0, 0.1), 0 3px 2px 0px rgba(82, 168, 236, 0.2)',
+            'background-color': '#fff',
+            'z-index': '10000'
+        },
+        listSelectedCssInfo: {
+            'background-color': 'rgba(82, 168, 236, 0.1)'
+        },
+        listDeselectedCssInfo: {
+            'background-color': '#ffffff'
+        },
+        minturm: 1,
+        adjustWidthVal: 11,
+        searchForm: $('#searchForm')
+    });
+
 });