When I create a search bar I always use the GET method. If a person searches for the word "code" the link will be: www.mywebsite.com/search?q=code
But at Unsplash, when you search the word code the link will be:
https://unsplash.com/search/photos/code
I copied this link, and I wrote all the words, even my first name (https://unsplash.com/search/photos/zayad) and I found a page with the images related to the searched words.
Do you have an idea on how, can I do the same thing in my website?
JavaScript. They intercept the form submission, update the address bar and redraw the page using JavaScript.
On the results page, they parse the URI in the address bar, make an AJAX request based on the search term they extract, and then update the page with the returned results.
Unsplash uses angularjs, that allows you to pass text from your text box as parameters quite easily. Wappalyzer says that Unsplash uses angularjs. Check out angularjs
Related
I'm trying to create a shortcut to a page with a search value included. For example in this page :
https://adminlte.io/themes/v3/pages/tables/data.html
There is a search field in the middle of the screen which is live (ajax) and when you type
1.8 it limits results to 8.
Can i create a url to show directly this "filtered data page " ?
something like this ->
https://adminlte.io/themes/v3/pages/tables/data.html?Search="1.8"
If I understood your question correctly, you want to pass a parameter to the search field and the search field functionality is done with javascript. In this case, you can pass a parameter like in your example, but then it will have to be in the code of the search functionality that your read the parameter and act accordingly, for example by reading window.location.search https://developer.mozilla.org/en-US/docs/Web/API/Location/search
I am working on a site which has an animated background, the animation is powered by javascript and therefore when the user enters and submits a search it would be great if the animation were to continue smoothly whist the search was completed and results appended to the DOM.
I have managed to get to the point where the results of the search are returned to JS from an ajax request although inherently the url of the ajax request is different from the url currently displayed in browser.
So my goal is for the user to come onto the site at say, www.example.com/public/home/search
They type something into text input and press search, the url changes to something like
www.example.com/public/home/search?q=some+search+query or
www.example.com/public/home/search/somesearchquery or
www.example.com/public/home/search/#somesearchquery, etc.
but the page state remains the same, the results are appended to the DOM and no full reload occurs.
Returning to a url like the one above should load the page and send the query automatically, returning the page with the results already appended.
I don't know weather this is possible, with or without obeying the MVC pattern.
I am not using any mvc framework and would like to avoid it if I can but instead using a bare bones system similar to the one found at. https://www.youtube.com/watch?v=OsCTzGASImQ
Any ideas, suggestions, alternatives?
There are several answers here for "change URL without reload", for example: Modify the URL without reloading the page .
So, I think you just have to implement some solution from one of these answers and run some javascript that change the page.
You have to be careful, because the modified URL must to load the same version of the page the user is seeing after the changes caused by the javascript. Otherwise, if the user copy and paste the URL, he will not be happy.
One way to archive it is to create the javascript function that "updates" the page without reload it based on the text input (let's say, f). Then, if the user try to access directly the page
www.example.com/public/home/search?q=some+search+query
your server side code just return the page search with a call to this javascript function at the end, like that:
f("some search query")
so, this function will update the page and the final effect will be the same as the user just enter in the page and after tries to type some search query.
(Note that, this function f may be used in both cases: when users type the text to search and when users just paste the entirely URL).
I'm new to this and doing some research on how to create a Search Box from scratch (without using plug-ins like Google, etc).
The idea is to search within a particular website NOT all websites like Google does. Search results need to be displayed on that particular website.
Preferably using JS and PHP.
Please advise. Thanks.
its pretty simple.
from javascript/DOM you need: onkeypress or onkeyup.
plus ajax technology to send it while user is on your page ( without redirects. but I think its better to not use ajax in this subject )
from php you need an "handler" script which
will get your requests from your search field ( input type=text ) and search data in your DB using simple SELECT (you can use LIKE option).
and then you fetch all results form your request to your result page.
So I have this site that dynamically posts content using jquery and php. I would like to know how to generate permalinks. I think I could do it, but I dont even know what I should be searching for on google. You can see the site at www.eataustineat.com.
For example, I would like a link like eataustineat.com/claypit to that would go directly to the video review, instead of having to to search for it and then click the link.
I will describe the how the site works on a basic level:
first the user selects the "All Restaurants tab" in the content slider, then jquery slides to the third frame.
Next, a user selects a link from a list. This list is generated by sql queries in php, while javascript pushes the result of the php to a specific div.
When a user selects a link, jquery slides to the second slide. Once again, php runs a query while javascript pushes the content to a specific div. As a result, the user never leaves the index page.
I think it depends on how your website works. The ideal thing that I have in my mind at the moment is:
Decide a unique way to find your video (could be a title, a file name, an id: must not change), if you are using a database it's a column with a value different for each entry
Create a webpage that accept as a parameter (not optional) (possibly a $_GET parameter, not a post) that unique key and fills it's content with entry's data (the video review hopefully)
Now the permalink will be yourwebsite/yourwebpage?myparam=myvalue
Normally the permalink is the numerical id referred to that entry (thinking about databases in this case)
Edit 1: If what you mean is "moving the webpage to the link" (and not creating it), maybe you should ignore my answer, I didn't understand the question so.
What suggested Tadeck, if this is the case, is good
Edit 2: What about if, following the keylines I given you to create a permalink, you pass this value to the homepage and on page load you fire the event through the click() function (so it's like if the user clicks on the link, fires everything that you need, even the scroller thing)
Obviusly you need to give an ID to each tag, but I don't think it's a big problem (just use directly your "permalink value" as an id
The alternative in using click() method, is: give to the slider function a name so you can call it instead of waiting the click event only, expecially this part
$('.cross-link').live("click", function(){
You'll have to replace function() with a named function
then you will call, on page load, that function + ajaxpage('result.php?id=9', 'results2') + ajaxpage('videoloader.php?id=9') completely emulating the click event in this case.
You still need however an id in the a tag to find out which is the link
You should search for one (or both) of the following points:
pushState and onStateChange - preferred, nicest and probably what you are looking for,
location.hash and onhashchange - probably easier to implement (does not require you to support it on server side and works in older browsers too), but in this case you would get URL like http://eataustineat.com/#!claypit instead of http://eataustineat.com/claypit.
In this first case you would need to make sure server side scripting / configuration will invoke proper state within JS, when visited eg. by entering URL (http://eataustineat.com/claypit).
I'm a C# developer for Windows and I know NOT THAT MUCH about web programming. I have developed a special search engine in Java. I want to create a php interface for it. For now, I managed to connect php and Java via a Web Service. I watched some tutorials for creating a search engine and I have some slight idea of what should I do but I don't know exactly what to do with some problems. Here's the scenario I want to implement:
An Index page with a search box, user types the search query in that page, some results shows, if the user scrolls down, more results shows (like Facebook). When user clicks on a result item's link, the browser then opens another page that shows the result (also in my app).
Now what I know is that the index page should be a HTML file with a Get method to a PHP file.
What I don't know is How to enable "more" results? For this, my php should send an array containing the URL of the previous results to my Java service, get the results, add them to the array and wait. The next time it should use this array.
Please let me know what code structure should I use for my app.
Thanks in advance.
Edit:
Requested code samples in java server:
public String processQuery(String query, List<String> previousURLs);
this will be called for the first time like this:
processQuery("test", null);
suppose it has returned 2 results with urls:
http://www.bing.com
http://stackoverflow.com
these will be stored in an array and the second time:
processQuery("test", previous);
this will return new results which will be added at the end of the page.
You need to use AJAX (Asynchronous JavaScript and XML) requests. Essentially as a user scrolls down the page this triggers a request to get more results. You'd probably do something like cache the last result id to know from where to get the next batch of results. You'll need to brush up your javascript and possibly jQuery in order to figure out how to implement all this - ie trigger the request, handle the response and append new elements to the DOM.
An example website that does this is Duck Duck Go. Their search results page dynamically appends new results as you scroll. Make sure you have Firefox + Firebug to inspect the page, the network requests that get made and to step through (debug) the running javascript.
I did it with the help of this tutorial:
http://www.9lessons.info/2009/07/load-data-while-scroll-with-jquery-php.html