How to hide text present inside search box? - javascript

I have set a bookmark which has -adult word to search query, so that inappropriate results won't show up. Now, how do I hide -adult present in the search box?
Example:
My idea so far:
To use CSS to hide it then make another textbox to be seen, then add a few event handlers to sync the real search box with my fake search box.
comments by #wOxxOm
that's tricky to implement I suppose since google uses ajax and
events, but probably it'll be possible to set a document mutation
observer which will hide the stuff in the search box before it's shown
If the above method is not possible, then please suggest alternative for solving this problem.

Remove -adult from the field and append it on the button click event. Example:
var keywordInput = $('input[name="-adult"]');
$('input[name="SearchButton"]').click(function() {
window.location = 'http://example.com?kwd=' + encodeURIComponent(keywordInput.val());
});

dont put the word you dont want them to see... use this code instead:
<?php
$dasearchstring = "I Want this text hidden";
$darealsearchstring = "Test".$dasearchstring;
?>
js code:
var dasearchstring = "I Want this text hidden";
var darealsearchstring = "Test"+dasearchstring;
dasearchstring is what the user searched; darealsearchstring is what is really searched.
The text "Test" is the string that you want to prefix searches with.
hope this clears it up!

Related

How to fill in Google Form's drop down and text inputs with Tampermonkey?

I am trying to automate an attendance form hosted by Google Forms, but the inputs aren't HTML <input> or <select> elements, so I am not sure how to change them other than manipulating the mouse and keyboard (an approach I used with Selenium).
Based off a fast peak; you could
let Form = document.querySelector('.freebirdFormviewerViewItemList');
let itemContainer = Form.querySelectorAll('.freebirdFormviewerViewNumberedItemContainer');
itemContainer.forEach((element)=>{
// Your code here, you should in theory be doing deeper loops depending on how advanced you want this.
});
Inside the loop we'd need to just find all the active inputs we want with a
itemContainer.forEach((element)=>{
if(element.querySelector('.exportOuterCircle')) {
console.log('we found ourselves a radio button but just one, we could go deeper with querySelector (and help of loops/etc)')
}
});
This is a bit of a large-task but not so bad, just make sure the freebirdFormviewerViewNumberedItemContainer class is correct every-form to or y ou find the pattern per-page that selects the questions for a fast loop through.
On loop, you're to query select one or more(if so apply another loop) to find the options you want. In this demo above radio button search, if the pages stay static you should with my example be able to grab/see a console pop-up no errors;
For setting these values, it's as easy in some cases setAttribute/value/ and other modifiers once selection is made. So you know click already and so the radio buttons be a good example. Any issues try navigating your elements in developer menu and sort if selections are going down correctly.
https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

How to fire a search with instantsearch.js when clicking on a button

I'm using Algolia instantsearch.js with a very simple search box and a search button like this http://codepen.io/anon/pen/aNXLBV
I've changed the search box behavior with options.searchOnEnterKeyPressOnly, I'd like to have a search fired also when someone clicks on the Search button.
I'm sure this is a RTFM issue, but I couldn't find anything on this, neither in the Algolia general JS docs, also they look like two different beasts in some aspects.
So how can I have a search fired both on Enter or clicking on the Search button?
Suppose you have a button of id search-button and search box of id search-box
If you are useing jquery do like so..
var search = instantsearch({
appId: algoliaCredential.appId,
apiKey: algoliaCredential.searcKey,
indexName: 'INDEXNAME'
});
search.start();
$('#search-button').on('click', function(){
var query = $('#search-box').val().trim();
search.helper.setQuery(query).search(); //Set the query and search
})
I have the similar problem and i did that way. Hope this will work.
You can just bind your button click/submit and call:
// search = instantsearch(); ...
search.helper.search();
Indeed this is not something trivial/documented and makes it hard to know when you only know instantsearch.js.
We will try to make it easier.

contentEditable and lastChild IE, Firefox & Chrome LastChild

Apologies for the long question, but I've tried a lot of things and done some research and havent found much of a solution. I have a content editable div.
<div contentEditable=true onkeyup='showResult(this.lastChild.textContent)'></div>
When a user types something into this div, the showResult javascript runs which is basically an ajax request which returns a list of items that match. When a user clicks on one of the suggestions, say the name "John", a span with the suggestion is added into this contentEditable div like so:
<div contentEditable=true onkeyup='showResult(this.lastChild.textContent)'>
<span id='uniqueId1' class='SpanClass' contentEditable='false'>John</span>
</div>
Having selected one Name, the user may want to search for another name. It HTML terms, that means that they would be typing the following:
<div contentEditable=true onkeyup='showResult(this.lastChild.textContent)'>
<span id='uniqueId1' class='SpanClass' contentEditable='false'>John</span>
New User Text Goes Here
</div>
On Chrome, the right behaviour happens when the user continues tries typing in the div - the showResult function runs on the new text that the user types in and ignores the span elements. For Example, if the user types in "Fr" having already selected John, it ignores the first children (John), and sends what the user typed off via ajax and returns suggestions like Fred and Frankie.
However, in IE the span is still content editable and the user can't add any text other than within the span, which seems to make no sense as it is clearly contentEditable=false The ajax request is therefore run on the "John" text plus whatever the user types in next, which is not what I'm trying to achieve.
Finally, in Firefox, the span is not contentEditable BUT the lastChild bit only picks up text within the span, and ignores the text the user puts in.
I've console logged the results of showResult(this.lastChild.textContent) to see what is being sent to the ajax request.
In Chrome, typing in "Fr" in the box after the "John" span sends "Fr" to the ajax and returns the right result.
In IE, typing in "Fr" in the box sends "JohnFr"
In Firefox, typing in "Fr" just sends "John".
As the issue is with this lastChild and the span, I've also included the Javascript that creates the span element. This only activates after a successful result is return and the result is clicked on. (please excuse the very messy Javascript/Jquery)
$('body').on("click", '.TagHints', function(){
//Once you click on the suggestion
var ThisData = $(this).data("id");
var ThisId = $(this).attr("id");
var ThisTag = $(this).data("tag");
//delete the text that the user typed in
elementToRemove = document.getElementById("FakeInput").lastChild;
document.getElementById("FakeInput").removeChild(elementToRemove);
var TagDiv = document.createElement('span');
TagDiv.className = 'SpanClass';
TagDiv.id = ThisId;
TagDiv.innerHTML = ThisTag;
TagDiv.contentEditable=false;
//append the Span to the contentEditable div
document.getElementById("FakeInput").appendChild(TagDiv);
var TagHints = document.getElementsByClassName("TagHints");
while(TagHints.length > 0){
TagHints[0].parentNode.removeChild(TagHints[0]);
}
});
Why are the three browsers behaving completely differently and how do I get them all to behave like Chrome is? Is there a better way of getting the text not in the spans?
I read on another answer that firefox likes inputs and IE likes breaks in this context but both do not seem to work for me. :-(.
One big stopper to good solutions is that jQuery stops working after about line 6, which has also completely baffled me. If anyone can explain why its not working, that would also be cool. Maybe something to do with it being an ajax query and content being created after jquery is loaded?
Thanks for your help!
So, although I haven't had any responses I've come up with a workaround. However, lastChild is still behaving differently between the three browsers so would appreciate any further input.
The answer was to have a function in the document ready section which cloned the original div, stripped it of its children and grabbed the text on key up using Jquery. This then passed the result to the showResult function like so:
$('#FakeInput').keyup(function(){
var ThisClone = $('#FakeInput').clone()
.children()
.remove()
.end()
.text();
showResult(ThisClone);
});
Equally, rather than trying to remove the text that the user typed in from the divs when the user makes a selection I simply cloned the items in the span, using their class, then emptied the contents of the div and reappended these cloned divs.
var TagItems = $('.TagItems').clone();
$('#FakeInput').empty();
$('#FakeInput').append(TagItems);
This solution works across the three browsers.

Change displayed price based on a button click

Really hope someone can help with this.
I am building a site and need to be able to have people display a price based on their preferred option.
To see what I mean, please look at this link where it is done perfectly: https://swiftype.com/pricing
...when people select monthly or yearly, the displayed price in the chart beneath changes dynamically and instantly (without page reload).
This is what I need (except with three option to choose, not one). I suspect it is jquery with dynamic divs, but I cannot make it happen.
If anyone can help, I would be so so grateful.
Best wishes, and thanks for your time. AB.
// make the billing period selected tabs work
$(function() {
var $pricingTable = $('#pricing-table');
$('#billing-picker .tab').click(function() {
var $selectedTab = $(this);
var selectedPeriod = $selectedTab.data('period-length');
$('.tab').removeClass('selected');
$selectedTab.addClass('selected');
$pricingTable.removeClass().addClass(selectedPeriod);
})
});
This is the SCRIPT which does the selection of button ..
The link that you provide, is using a monthly or yearly class to hide and show the divs that already contains the prices, without any Ajax call. Try to inspect the elements with firebug or other console and you will see by yourself how is working.
You can either have an empty div which, on button click loads ajax content dynamically. If it's always going to be the same content, than I would suggest just have three divs and simply hiding the ones that are not being shown.
Have a look into the Jquery 'hide' method.
Hope that helps

Find a Text and scroll into it with javascript

I have a div that contains hundreds of lines.
I want to create a function that allows me to find a text and scroll into it:
function findAndScroll(text)
So, I enter the wanted text in an input text, I click on the "Go" button that will trigger the "findAndScroll" function then I get scrolled to that text.
Before coding, is there an existant jQuery plugin or a javascript library
that can do this?
Thank you,
Regards.
You can use a function like this to find the text and highlight it. You can then scroll to the highlighted element like this:
var offset = $("#id_of_highlighted_element").offset().top;
window.scrollTo(0,offset);
or you can simply go the id like this
window.location = "#id_of_highlighted_element";
However window.scrollTo is more flexible because you can set the element to wherever you want on the page.

Categories

Resources