I currently have autocomplete functionality on the results page using Google custom search, but how can I see autocomplete display in a separate custom search box?
<script type="text/javascript">
$(document).ready(function () {
$("#googleCseSearchTextBox").keypress(function (e) {
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 13) { //Enter keycode
googleCseSubmit();
return false;
}
});
$("#googleCseSearchButton").click(googleCseSubmit);
});
function googleCseSubmit() {
window.location.href = "my site and key" + $('<div/>').text($("#googleCseSearchTextBox").val()).html();
};
</script>
Custom search box:
<div>
<fieldset class="sfsearchBox">
<input name="googleCseSearchTextBox" type="text" id="googleCseSearchTextBox" class="sfsearchTxt" />
<input type="button" value="Search" id="googleCseSearchButton" class="sfsearchSubmit" />
</fieldset>
</div>
Thanks
Insert this code on the your first page for autocompletion. Don't forget to add your own google id below.
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load('search', '1');
google.setOnLoadCallback(function(){
google.search.CustomSearchControl.attachAutoCompletion(
'your-google-search-id',
document.getElementById('search-field'),
'search-form');
});
</script>
<!-- example search form -->
<form id="search-form" action="/search">
<input id="search-field" name="search-field" type="text" />
<input type="submit" value="Search" />
</form>
Also check here for more reference
https://developers.google.com/web-search/docs/
Related
I am a newbie to VueJs
I would like to use Vue2 to create a validation form
Index.html
<div id="app">
<form action='process.php' method="post" name="submit_form" id="submit_form" v-on:submit="validateForm">
<label for="username">Name</label>
<input type="text" name="username" v-model="username" placeholder="Username"/>
<br><br>
<input class="submit_button" name="submit_form" type="submit" value="Submit">
</form>
</div>
but When I click the previous or next page, then back to index.html form page.
The input field's data is auto-remove.
How to using keep-alive in vuejs to save user input?
Is there any simple example?
Thank you very much
When you click on the previous or next page (I think you mean the browser's arrows) the page it's reloaded, so the javascript (and vue) too. To keep the data, you must "save" the form's state. A simple solution can be to save the form object in sessionStorage and check if there is a sessionStorage Item (let's say with a key 'formData') and fill the form object with these values.
Example:
<html>
...
<body>
<div id="app">
<form action='process.php' method="post" name="submit_form" id="submit_form" v-on:submit="validateForm" v-on:change="saveFormDataState">
<label for="username">Name</label>
<input type="text" name="username" v-model="formData.username" placeholder="Username"/>
<br><br>
<input class="submit_button" name="submit_form" type="submit" value="Submit">
</form>
</div>
<script>
new Vue({
el: '#app',
data: () => ({
formData: {
username: ''
}
}),
methods: {
initFormDataState(){
const formData = JSON.parse(sessionStorage.getItem('formData') || '');
if(formData){
this.formData = formData;
}
},
saveFormDataState(){
const formData = JSON.stringify(this.formData);
sessionStorage.setItem('formData', formData);
}
},
created(){
this.initFormDataState();
}
});
</script>
</body>
</html>
Note that I have added the on-change listener to the form to save the form's state when the user focuses on another input element or presses the submit button.
Alright so I am trying to bind this vue components to a class name so it triggers on every element that has this class but what happens is that it only works with the first element and not with other ones
<div class="__comment_post">
<textarea></textarea>
<input type="submit" v-on:click="submitComment" /> <!-- submit comment being only triggered on this one -->
</div>
<div class="__comment_post">
<textarea></textarea>
<input type="submit" v-on:click="submitComment" />
</div>
<div class="__comment_post">
<textarea></textarea>
<input type="submit" v-on:click="submitComment" />
</div>
As you can see above, I've got 3 divs with class __comment_post so naturally submitComment should be bound to all these 3 divs but what happens is that submitComment is being triggered only on the first one
var app = new Vue({
el:".__comment_post",
data: {
comment: ""
},
methods: {
submitComment: function() {
console.log("Test");
}
}
});
Here is a little example you and others can follow in order to bind vue instance to class names.
Lets say, you would like to bind Vue to multiple existing <div class="comment"> element in HTML.
HTML:
<div class="comment" data-id="1">
<div>
<div class="comment" data-id="2">
<div>
Now, you can try the following logic/code to your example.
JS:
var comments = {
"1": {"content": "Comment 1"},
"2": {"content": "Comment 2"}
}
$('.comment').each(function () {
var $el = $(this)
var id = $el.attr('data-id')
var data = comments[id]
new Vue({
el: this,
data: data,
template: '<div class="comment">{{ content }}<div>'
})
})
I hope this will answer your question :)
The vue instance is mounted on the first found DOM element with the css selector passed to the el option. So the rest two div have no vue instances mounted on them.
So wrap your divs with a wrapper div and mount the vue instance on that wrapper
<div id="app">
<div class="__comment_post">
<textarea></textarea>
<input type="submit" v-on:click="submitComment" /> <!-- submit comment being only triggered on this one -->
</div>
<div class="__comment_post">
<textarea></textarea>
<input type="submit" v-on:click="submitComment" />
</div>
<div class="__comment_post">
<textarea></textarea>
<input type="submit" v-on:click="submitComment" />
</div>
script
var app = new Vue({
el:"#app",
data: {
comment: ""
},
methods: {
submitComment: function() {
console.log("Test");
}
}
});
I want to add a dropzone inside an existing form but it doesn't seem to work.
When I view the console I get error throw new Error("No URL provided"). When I click upload I get no preview either - all I get is a normal file input.
<link href="../dropzone.css" rel="stylesheet">
<form action="/" enctype="multipart/form-data" method="POST">
<input type="text" id ="Username" name ="Username" />
<div class="dropzone" id="my-dropzone" name="mainFileUploader">
<div class="fallback">
<input name="file" type="file" />
</div>
</div>
<div>
<button type="submit" id="submit"> upload </button>
</div>
</form>
<script src="../jquery.min.js"></script>
<script src="../dropzone.js"></script>
<script>
$("my-dropzone").dropzone({
url: "/file/upload",
paramName: "file"
});
</script>
No url provided error is because $("my-dropzone") is wrong instead it must be $('#mydropzone')
dropzone along with other form, yes this is very much possible, you have to post the data using the URL provided in the dropzone not in the form action. That means all your form data along with the files uploaded shall be posted back to the url provided for the dropzone. A simple untested solution is as below;
<link href="../dropzone.css" rel="stylesheet">
<form action="/" enctype="multipart/form-data" method="POST">
<input type="text" id ="Username" name ="Username" />
<div class="dropzone" id="my-dropzone" name="mainFileUploader">
<div id="previewDiv></div>
<div class="fallback">
<input name="file" type="file" />
</div>
</div>
<div>
<button type="submit" id="submitForm"> upload </button>
</div>
</form>
<script src="../jquery.min.js"></script>
<script src="../dropzone.js"></script>
<script>
$("#mydropzone").dropzone({
url: "/<controller>/action/" ,
autoProcessQueue: false,
uploadMultiple: true, //if you want more than a file to be uploaded
addRemoveLinks:true,
maxFiles: 10,
previewsContainer: '#previewDiv',
init: function () {
var submitButton = document.querySelector("#submitForm");
var wrapperThis = this;
submitButton.addEventListener("click", function () {
wrapperThis.processQueue();
});
this.on("addedfile", function (file) {
// Create the remove button
var removeButton = Dropzone.createElement("<button class="yourclass"> Remove File</button>");
// Listen to the click event
removeButton.addEventListener("click", function (e) {
// Make sure the button click doesn't submit the form:
e.preventDefault();
e.stopPropagation();
// Remove the file preview.
wrapperThis.removeFile(file);
});
file.previewElement.appendChild(removeButton);
});
// Also if you want to post any additional data, you can do it here
this.on('sending', function (data, xhr, formData) {
formData.append("PKId", $("#PKId").val());
});
this.on("maxfilesexceeded", function(file) {
alert('max files exceeded');
// handle max+1 file.
});
}
});
</script>
The script where you initialize dropzone can be inside $document.ready or wrap it as a function and call when you want to initialize it.
Happy coding!!
I started to use Pubnub for making video group chats. However, when I was testing it, I found a little problem: As I connect my computer to their servers, my webcam turns on and never turns off, unless I leave the page.
However, I wish to be able to close a video chatting, and turning off the webcam at the same time. How to do it?
Thank you very much!
EDIT: Here is a code I'm using for my tests, I'm using the one given in the tutorial:
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/pubnub-3.7.18.min.js"></script>
<script src="js/webrtc.js"></script>
<script src="js/rtc-controller.js"></script>
<div id="vid-box"></div>
<div id="vid-thumb"></div>
<form name="loginForm" id="login" action="#" onsubmit="return login(this);">
<input type="text" name="username" id="username" placeholder="Pick a username!" />
<input type="submit" name="login_submit" value="Log In">
</form>
<form name="callForm" id="call" action="#" onsubmit="return makeCall(this);">
<input type="text" name="number" placeholder="Enter user to dial!" />
<input type="submit" value="Call"/>
</form>
<div id="inCall"> <!-- Buttons for in call features -->
<button id="end" onclick="end()">End</button> <button id="mute" onclick="mute()">Mute</button> <button id="pause" onclick="pause()">Pause</button>
</div>
<script>
var video_out = document.getElementById("vid-box");
var vid_thumb = document.getElementById("vid-thumb");
function login(form) {
var phone = window.phone = PHONE({
number : form.username.value || "Anonymous", // listen on username line else Anonymous
media : { audio : true, video : true },
publish_key : 'pub-c-c66a9681-5497-424d-b613-e44bbbea45a0',
subscribe_key : 'sub-c-35aca7e0-a55e-11e5-802b-02ee2ddab7fe',
});
var ctrl = window.ctrl = CONTROLLER(phone);
ctrl.ready(function(){
form.username.style.background="#55ff5b"; // Turn input green
form.login_submit.hidden="true"; // Hide login button
ctrl.addLocalStream(vid_thumb); // Place local stream in div
}); // Called when ready to receive call
ctrl.receive(function(session){
session.connected(function(session){ video_out.appendChild(session.video); });
session.ended(function(session) { ctrl.getVideoElement(session.number).remove(); });
});
ctrl.videoToggled(function(session, isEnabled){
ctrl.getVideoElement(session.number).toggle(isEnabled); // Hide video is stream paused
});
ctrl.audioToggled(function(session, isEnabled){
ctrl.getVideoElement(session.number).css("opacity",isEnabled ? 1 : 0.75); // 0.75 opacity is audio muted
});
return false; //prevents form from submitting
}
function makeCall(form){
if (!window.ctrl) alert("Login First!");
else ctrl.dial(form.number.value);
return false;
}
function end(){
ctrl.hangup();
}
function mute(){
var audio = ctrl.toggleAudio();
if (!audio) $("#mute").html("Unmute");
else $("#mute").html("Mute");
}
function pause(){
var video = ctrl.toggleVideo();
if (!video) $('#pause').html('Unpause');
else $('#pause').html('Pause');
}
</script>
Note that I tried to find the function through the console in addition to my searches, but I was unable to find it...
We are using Google custom search engine(Paid).We are not using google search control.How to implement the Autocomplete(query Suggestions) feature programatically. Is there any specific API for autocomplete
You can easily enable autocomplete in your GSS/CSE account:
https://support.google.com/customsearch/answer/2631081?hl=en
And then wait some time for automatic autocompletitions to be generated by Google.
If "not using google search control" means "we are using plain HTML form", then try this:
<form id="searchForm" action="http://google.com/cse">
<input type="hidden" name="cx" value="013315504628135767172:d6shbtxu-uo" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="31" id="searchText" />
<input type="submit" name="sa" value="Search" />
</form>
<img src="//www.google.com/cse/images/google_custom_search_smwide.gif">
<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('search', '1');
var autoCompletionOptions = {
'maxCompletions' : 3,
'styleOptions' : {
'xOffset' : 10
}};
google.setOnLoadCallback(function() {
google.search.CustomSearchControl.attachAutoCompletionWithOptions(
"013315504628135767172:d6shbtxu-uo", document.getElementById('searchText'), 'searchForm',
autoCompletionOptions);
});
</script>
Of course, autocomplete should be enabled for that GSS/CSE (like described on the link above) no matter what you are using - CSE element or HTML form.