How to autocomplete text field in javascript conditionally based on datasource? - javascript

I want to be able to perform "conditional autocompleting" based on the text that is typed in the query. For example:
A user can:
Type "f", which then pull up suggest names for all field names "field_name", "field_age" as suggestions.
If the user then types or selects "field_name" then types "=" in the box, then there would be a request for a specific list of data unique to"field_name" such as [Albert, Bob, Clarisse].
If the user then types " " (space) then the options would be remotely pulled in or accessed ["AND", "OR", "==", "!=". Once the user selects or types say "==" then based on the current string so far "field_name == ' ' ", the list [Albert, Bob, Clarisse] would be used.
If the user were to instead type field_age... then a request would go out specficially for a list or json object of ages [7,3,6] that would then pop up. A sample input in a search box would be:
field_name = 'Albert' AND field_age = '7'
I've seen a library typeahead.js, but it appears to just pull in all the data to be autocompleted as opposed to "data as needed" (in this case, names and ages. the reason being is that names could be gigantic, with many many names and I do not want to client to download all the values for every single possible field available as it would be a rather large download).
What is the best way to do this? Is typeahead.js support this or some alternate library better?

Doesn't dijit/form/ComboBox deliver what you're looking for here?
There are lots of Similar answers to your question posted on here - have a browse through them...

My suggestion would be to use two boxes, seems like the most logical approach to me. The first one narrows things down by name, and the second one narrows it down by age or some other field. This way you can then do an AND/OR SQL statement. You can also, of course, limit the number of responses that you send back from the server, as you are correct, sending back a thousand+ auto completes is of little use. As far as which library, at that point you should be able to use any autocomplete library you wish, there are probably a few dozen of them. jquery UI, dojo, or my favorite Select2.
You can also of course write you own method to utilize a single text box instead of two. In which case I would suggest doing it on the server-side instead of client-side. I don't know of any libraries that can do this automatically on the client or server-side.

Related

How to write data into a specific location Firebase Web

I want to write data into a specific location in the database. Let's say, I have a couple of users in the database. Each of them has their own personal information, including their e-mails. I want to find the user based on the e-mail, that's to say by using his e-mail (but I don't know exactly whose e-mail it is, but whoever it is do something with that user's information). To be more visible, here is my database sample.
Now, while working on one of my javascript files, when the user let's say name1 changes his name, I update my object in javascript and want to replace the whole object under ID "-LEp2F2fSDUt94SRU0cx". To cut short, I want to write this updated object in the path ("Users/-LEp2F2fSDUt94SRU0cx") without doing it by hand and just "knowing" the e-mail. So the logic is "Go find the user with the e-mail "name1#yahoo.com" and replace the whole object with his new updated object". I tried to use orderByChild("Email").equalTo("name1#yahoo.com").set(updated_object), but this syntax does not work I guess. Hopefully I could explain myself.
The first part is the query, that is separate from the post to update. This part is the query to get the value:
ref.child('users').orderByChild("Email").equalTo("name1#yahoo.com")
To update, you need to do something like this once you have the user id from the query result:
ref.child('users').child(userId).child("Email").update(newValue);
firebase.database.Query
A Query sorts and filters the data at a Database location so only a
subset of the child data is included. This can be used to order a
collection of data by some attribute (for example, height of
dinosaurs) as well as to restrict a large list of items (for example,
chat messages) down to a number suitable for synchronizing to the
client. Queries are created by chaining together one or more of the
filter methods defined here.
// Find all dinosaurs whose height is exactly 25 meters.
var ref = firebase.database().ref("dinosaurs");
ref.orderByChild("height").equalTo(25).on("child_added", function(snapshot) {
console.log(snapshot.key);
});

What is the best way to do complicated string search on 5M records ? Application layer or DB layer?

I have a use case where I need to do complicated string matching on records of which there are about 5.1 Million of. When I say complicated string matching, I mean using library to do fuzzy string matching. (http://blog.bripkens.de/fuzzy.js/demo/)
The database we use at work is SAP Hana which is excellent for retrieving and querying because it's in memory so I would like to avoid pulling data out of there and re-populating it in memory on the application layer but at the same time I cannot take advantages of the libraries (there is an API for fuzzy matching in the DB but it's not comprehensive enough for us).
What is the middle ground here? If I do pre-processing and associate words in the DB with certain keywords the user might search for I can cut down the overhead but are there any best practises that are employed when It comes to this ?
If it matters. The list is a list of Billing Descriptors (that show up on CC statements) therefore, the user will search these descriptors to find out which companies the descriptor belongs too.
Assuming your "billing descriptor" is a single column, probably of type (N)VARCHAR I would start with a very simple SAP HANA fuzzy search, e.g.:
SELECT top 100 SCORE() AS score, <more fields>
FROM <billing_documents>
WHERE CONTAINS(<bill_descr_col>, <user_input>, FUZZY(0.7))
ORDER BY score DESC;
Maybe this is already good enough when you want to apply your js library on the result set. If not, I would start to experiment with the similarCalculationMode option, like 'similarcalculationmode=substringsearch' etc. And I would always have a look at the response times, they can be higher when using some of the options.
Only if response times are to high, or many active concurrent users are using your query, I would try to create a fuzzy search index on your search column. If you need more search options, you can also create a fullext index.
But that all really depends on you use case, the values you want to compare etc.
There is a very comprehensive set of features and options for different use cases, check help.sap.com/hana/SAP_HANA_Search_Developer_Guide_en.pdf.
In a project we did a free style search on several address columns (name, surname, company name, post code, street) and we got response times of 100-200ms on ca 6 Mio records WITHOUT using any special indexes.

Efficient way to search for autocomplete suggestions in a large array

I have a webapp with an input field which should be filled in with user's region according to ISO3166-2. To improve user experience I wanna make this field an autocomplete - user starts typing, and gets suggestions. There's also a country field, which, if filled, would limit the amount of regions to suggest to regions from the chosen country.
The regions list is a pretty large amount of data, which includes region names and codes for all officially recognized countries in the world and it's footprint is about 250kB.
Those of you, who had similar experience, which of the following ways to implement it would you recommend to achieve the best performance and why?
1) don't send the whole regions list to the client and make a request to server instead every time user types in region field (debounce it, ofcourse), so we look for suggestions server-side but have additional roundtrips;
2) use a webworker to find suggestions;
3) smth else?
You can have an associative array with keys as the region name (or somewhat similar), then you can have the array populated from the backend according the the logic.
Binary search the array using the typed keyword
If data exists then populate the autocomplete or else populate the array from backend data.
You have to write code to maintain the array yourself.
Or else you can save your time by using something like Twitter typeahead with Bloodhound having prefetching, intelligent caching, fast lookups, and backfilling with remote data.
Here's the link: https://github.com/twitter/typeahead.js

Meteor check text before database insert

I have a simple textarea which people can insert a paragraph of text. A user doesn't have to be logged in to submit, and the submit will be displayed in the browser straight away.
My question is around validating the text in the client. I am planning to use .allow then insert in the client. What is the best way to check that the text is not something which will do something harmful in the database once the data is committed?
I am new to web development, so I am not sure if anyone can write some harmful text which when submitted will delete the entire database once it is inserted, or do something else harmful.
It may be impossible, but I was wondering if anyone checked the schema for anything harmful before submitting.
I think this is really two questions.
One: Can someone insert malicious text into the database (like SQL injection)?
The answer to this is no, nothing they write can get directly executed. For instance, they could enter the text: "function(){ /do some naughty things/ }", which would just end up as a string in whatever document you store it in.
Two: How do I validate data before inserting into the database?
Regardless of whether query injection attacks are a significant risk or not, any web-application should always expect and deal with bogus form entries. In terms of validation, you have a lot of options out there. My personal favorite is Collection2, which will automatically validate all data against a schema you define when creating the collection.You can easily define min/max lengths, type restrictions, or use the custom option to define a custom function to validate a field. This is a really easy way to make sure all your data get's validated before inserting into the database.

Type and search, how to improve the performance?

I want to implement somethings like searching on wiki, when I want to search "apple" , I type "a" it shows the words start from "a"... I know that it can implement when I type, I submit a SQL query to search the article start from "a", but when more and more query request, it become slow... ... Is there any performance turning technique on doing this kind of things? Thank you.
On the server-side you should cache the results, ideally in memory (e.g: Memcached). So if 10 people hit "a" it will be only one query to the database and 9 super fast data access from the memory.
As for the bandwidth optimization, you should send your data in JSON, or alternatively some custom data format. See this awesome article: Building Fast Client-side Searches
Not sure what version of SQL you are using, but a few assumptions:
You have an index on the field you are searching
You are only returning the needed field (like title), not SELECT *
What I would recommend considering is reducing the number of rows returned depending on the size of the search query, something like: (pseudo-code, don't know your SQL dialect)
if len(searchString)<=3
select top 50 title from table order by title
else
select title from table order by title
The smaller searches are likely to return many more rows, but most users are likely to type in several letters before then stop typing, so for the initial queries, don't return all of the rows.
Not a technical answer an maybe obvious, but for client side I think you can launch your search event not on the key press but after X millisecond after the key press and with the condition that nothing is changed.
So if I want search a "word" and i type "w" "o" "r" "d" in a speedy way you only make une request and obviously you can optimize that request SQL way

Categories