can i use jquery auto-completion here ?
Based on my test, we can attach jQuery Autocomplete widgets to webchat input box. The following sample code is for your reference.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="https://cdn.botframework.com/botframework-webchat/latest/botchat.css" rel="stylesheet" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"/>
<link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdn.botframework.com/botframework-webchat/latest/botchat.js"></script>
<style>
.wc-chatview-panel {
width: 350px;
height: 500px;
position: relative;
}
</style>
</head>
<body>
<div id="mybot" />
</body>
</html>
<script>
BotChat.App({
directLine: { secret: "{your_directline_secret}" },
user: { id: 'You' },
bot: { id: '{your_bot_id}' },
resize: 'detect'
}, document.getElementById("mybot"));
$(function () {
var availableTags = ["ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL"];
$("input.wc-shellinput").autocomplete({
source: availableTags
});
})
</script>
Test result:
Note: I enter a, it show a list items for my selecting, and then I select an item, such as ActionScript, if I directly click send button, it will only send a to bot. To avoid it, we can manually enter a white-space (or other characters) and remove them before click send button.
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
