Implement instant search adding and removing html elements dynamically - javascript

I am a beginner at HTML and javascript so apologies if the questions below appear obvious.
I am trying to implement instant search in a website with pure java script but I have a few questions.
Right now I plan to have a function respond to each onkeyup event. Making use of AJAX, the function will contact a server which returns links separated by a newline character. now the questions:
If the text returned by the server is already in the form of html links and paragraphs, is there a way I can insert it after the html input text box? If so how can I do this? I have found references to createElement() and appendChild() methods but am not sure how they work. Also, people have suggested using a tag but I have never used this in html and am not sure what it is.
If the above is not possible I was thinking of doing the following,
When the text is returned by the server,
1. use String.split() to turn the returned text into an array of results.
2. for each element in the array
3. Create an element and insert it . (still need to check exactly how to do this).
4.
end for
A problem being is that I would need a quick way of clearing the previous search results each time a key would be pressed.
Any help is greatly appreciated.

The best way is to return via Json.
Json will have all search result, you can easily use Json via http://www.json.org/js.html
This will be good approach in place of splitting out the contents.

Related

Testbox auto complete from string

I have a notepad file of about 10,000 words. I can export them as csv or tab separated values as required. Is there a way for my words to appear as suggestions in a textbox (input type text)?
This word work in the same way as google.
In HTML5 you have the datalist element which gives you a kind of autocomplete feature. Although I'm not really sure about what you want an answer to, for example it is probably not that efficient to put 10 000 words inside the datalist element.
You can use jquery along with some plugin for maximum cross-browsing capability.
Here is an example of what you are trying to achieve http://jqueryui.com/autocomplete/
Click on the vew source link on the page to see how it is done.
Edit:
Since you are using a lot of elements, why not creating an ajax request after the text change to load the elements you want and then stream them into a div right under the text box? This will make you more in control of what the user is seing and it will work on all browsers.

How can I use OnKeyUp to trigger a javascript over and over?

First time asking a question here so please be gentle... I use a set of perl script (no judging please) that are great for simple flat file database creation, updating and searching (www.ezscripting.com/csv). I have used these scripts well beyond the intended uses including being able to display data using a javascript to call the data.
What I'd like to do is have a form field that searches a specific field in the database, let's say . What I'd like to do is allow a visitor to start to type in the search field and have the OnKeyUp event handler trigger a javascript call that will pull up to 5 entries in my database.
Is there a way to have OnKeyUp in an input field tag trigger an embedded javascript each time a new letter is typed?
There's an example here
that uses AJAX to do what I think you're trying to do.

Send value from one page to another

I have 2 pages say index.html and 2ndPage.html.
index.html has two textboxes and a button. Now i want to enter some data in the textboxes and received the data in 2ndpage.html. I want to use only javascript. dont want to use query string. Only post or get method. Is it possible? Please help me or guide me how to send and receive data form one page to another in javascript/jquery.
Well, using javascript or jquery you can accomplish that. Check jQuery's AJAX function. Otherwise, learn PHP as already mentioned in the comments.
using localStorage or sessionStorage you can do this. here is a link, which will help you. i just take few css property from one page to another page. but you can take input value also.
Taking css property from one html page to another page
or if you are taking care of old browser also then javascript Location object is the way to go.

Prompt with hints in Javascript

I'd like to get some input from the user:
keywords = prompt("Input keywords separated by commas", "");
I have many various strings stored in an SQLite database that could suggest the user what to type.
Let's say you have an array or list of these strings. How would you code this hinting in Javascript? Are there some functions or code snippets for this functionality?
I'd like it to work similarly as here. When you start typing you get hint with possibilities. There is only one disadvantage, that you can't input more strings separated by commas. Here is this feature working with more strings.
Is prompt() function suitable for this purpose? You can use another way of getting user input.
Thank you
You cannot tweak the native prompt() javascript method.
I know you did not tag with jQuery but would be way easier to use a library to implement such a behavior.
You'll have to build your own dialog system using maybe jQuery UI Dialogs. They have an option to make it modal so the UI is blocked until the dialog is closed.
jQuery UI Dialog will not block javascript execution though like prompt does. You might need to be able to execute code when the dialog is closed. This answer show a way to implement that easily.
Finally, the jQuery UI Autocomplete provides an example on how to use it for multiple values in the same input. They use a comma-separator but I guess you could modify the example to work with whitespaces: jQuery UIAutocomplete Multiple Values
You can't really use any custom functionality with prompt().
You'd be better off creating an <input type="text"/> and hooking the whole thing up to a button, making the data get submitted whenever a use clicks it, or presses enter. Then code it to fetch an autosugges value whenever the user types in a new character.
You should take a look at jQuery UI's autocomplete component (it works with multiple strings as an input as well). You would also need to set up a server-side script that will take a possibly incomplete string as an input and output a possible list of matches back to the browser.

How do you scrape fields for auto-tagging?

We have a form with a large textarea and a couple text fields. We also have a list of 1500 tags (some have spaces) categorized in 5 types. What is the best way to scrape the text entered by users to extract tags that they may have entered.
We do not want to give them a tag field - it needs to happen automatically.
Any ideas?
Front-end wise:
I would suggest you using one of the available autocompletion jquery plugins (there are many, just google around) that does an AJAX request per tag, returning a JSON object with the similar tags. To do this you'll need to make a route where you can query; example: http://mysite.com/tags?s=%s which returns JSON.
The other way to do it, the lazy way, which is doable considering the amount of tags you have (and of course depending if this is something users can view) is outputing the whole tag array as a JSON object embeded on the document. I don't recommend this unless you're in a really urge to solve the problem and you don't mind loading extra amount of stuff.
The tags should be separated by commas.
Back-end wise:
Once you submit the form you'll need to add an extra procedure to parse the given tags. Just do a tags.split(',') and you'll get a tag array which you can later iterate over to insert the data into the database.
If I understand your problem correctly, one solution could be this:
On application load, build a Set with all the tags.
When a user posts a text, iterate through all the words and check them against the Set.
This would be pretty fast for your purpose, considering looking up in a Set takes constant time.
If a word is included in your tag-set, add the word to a new Set. When done iterating through all the words, do the database queries to associate the new tags with the uploaded text.
Well if I understand this right.
You could use regex, but I am not sure about its efficiency when working with 1500 match-able results (if you can define multiple tags in a single regex statement that would be good).
for(var index = 0; index < textAreas.length; index++)
{
textAreas[index].innerHTML.match(new Regex("/" + tags + "/", g)); //will return an array of the found tags.
}
//Where Tags is in the format tag1|tag2|tag3
//Where tagN can be a regex that matches multiple tags in your list.
I won't edit my previous answer since this one is a completely different approach to the one proposed; and editing it would mean remaking it, which is a bad idea considering the answer may be useful to someone.
One way to make "auto tagging", in the sense that you never tell your people to write a single keyword, is to parse the content being aware of the context (for instance, if your people will write about Bikes, you need to avoid ignoring those words).
To begin with the content:
Remove Pronouns
Remove Common Names (non-related)
Remove Conjunctions
Remove Prepositions
Remove addresses (but take the word that is linked)
Split all the words remaining words, and weight them based on appearance.
Give more weight to words that are linked or that appear on the title tag.
This should be done on the back-end; since the odds are you're going to be doing a lot of preparing. Removing HTML at especial points, iterate through arrays, weight the words and sanitize them.

Categories