Searching a HTML <select> List with a Large Number of Entries - html

I have a similar question to the one asked here.
HTML select tag autocomplete
A list on a website I use had a large (~20,000) number of entries. So when I highlight an option and start typing to find an entry I'm looking for, the browser (Chrome) can't find the option quickly enough. If I tried to find an entry, for example, called 'Apple', I would begin typing the word and the list would highlight an entry beginning with 'A', then another entry beginning with 'P' and so on. It is able to find strings of characters (eg, an entry beginning with 'Ap') but only if I type at a very specific speed.
My question is, as a user, are there any settings, browser or otherwise, that I could access to allow me to search this list? Perhaps to change the speed I need to type in order to search for strings of characters. In Chrome's settings (and advanced settings), there appear to be no settings related to this.
Thanks.

As a user, there's not much that can be done. You don't have access to the underlying data structures of the <select> element, so the browser has to search through the <option>s one at a time.
As a developer, the trick is to not search the <select> box. Instead, use it as the raw data to build a searchable data structure when the box first loads, and then run your searches on that instead. The result of a search should contain the appropriate index into the <select> box, and then you just select that.
A trie (not to be confused with a binary search tree) might work well for something like this. At each node in the trie, you store the index of the first <option> element whose prefix matches the string up to that point. Then you branch off to child nodes corresponding to the next character in the string. John Resig, of jQuery fame, did some work with JavaScript tries a few years ago. He was using it on a text dictionary, but it should be adaptable to something like this.

Related

How to create language-dictionary database from text file?

I have a large text file, which is an Italian-English dictionary. A typical line is:
Mazzapícchio, a long pole that fishers vse to bob vp and down for Eeles, and also to make fish to stirre. Also a kind of meate or custard in some parts of Italie made with milke and egges.
(Yes, it's a 17th-century dictionary.)
I'm looking for the best/easiest way to turn this into a searchable database.
The search would need to ignore the diacritics; with everything up to the first comma as the 'entry'. There are some cross-references, e.g.: Mefíte, as Mephíte.
My first thought is simply to turn it into HTML, with anchor tags for the word/phrase up to the first comma. That should be easy enough with a bit of Grep. I could also add links to the crossrefs in the same way (using BBEdit to confirm each change). It would then be easy to query just using a browser's search field.
However, ideally, I'd like something that returned only (all) the matching results. XML/HTML Tagging is the easy bit: the problem is the front-end to access/query it.
I'm on MacOS. (I'm also investigating Apple's Dictionary format...)
Any ideas on how to proceed would be welcome. Thanks.
This is a huge question. So many choices at so many areas.
A small start:
A searchable db. Look at https://solr.apache.org/
Php to handle interaction front-end with solr and to serve your html search form and results.

Do I need a database to handle my website content?

So I'm building a website that contains information about a bunch of different animal species. I will have a list of 500 items, that should be able to be filtered and sorted by different criteria. For example, I will have a 'country selection' option. If Brazil is selected, the Capuchin monkey among other animals (living in Brazil) should be added to the list.
I could see myself making a list with 50 species with no problem, as the HTML would be manageable. But would having 500 items in a list with filterabilty even be possible without using some sort of database?
I was thinking of just pairing animal items from the list with certain filter criteria. For example, Capuchin monkey with "Brazil", "Mammal", "Omnivore", etc.
And when e.g. "Mammal" is selected in the filter, all animals paired with that property (all mammals of the list) is added to the list, or if not paired with the property, then removed from the list.
As you probably can tell, I'm really uneducated on how to go about creating this filterable list. Down the road I might even look into adding a search function.
After pluggin in all content, I would never need to change anything. I've read that databases should only be used if you have dynamic content.
I wouldn't list all 500 items on the same page, as that would make it very slow. I would have 10 items per page.
I don't need a solution per se. I just wish to be pushed in the right direction.
Should I look into MySQL? Can a filterable list of 500 items be possible with just HTML/CSS/Javascript? I am somewhat familiar with javascript, and have read that JSON might be able to provide the things I need.
Sorry if my question is vague or if I'm in the wrong anywhere (this is my first post). Please ask for any clarification and any advice or suggestion is greatly appreciated.
Thanks,
Manne
No you don't need a database. Have a look at this very robust jQuery plugin that will easily allow you to sort/filter/search 500 items in JavaScript alone:
https://datatables.net/
There are examples that are powered from JSON alone so I would suggest you simply store your data in a JSON file until you grow large enough that you need to change that (if you ever do).
Here is an example where the data is pulled from a .txt file:
https://datatables.net/examples/data_sources/ajax.html

How to create a clickable "tag cloud" to populate a subform?

I've been lurking around for years reading up on all sorts of topics. Professionally I'm a Systems Interface Specialist/Interface Architect. I can work wonders with tcl, Cloverleaf, HL7, even Excel, but Microsoft Access eludes me. It repeatedly befuddles and confounds me. Everything that would seem simple and logical to me is neither of those things where MS Access is concerned.
So, I've come to you. Honestly, I'm not even sure I'll be able to put into the correct "technical" words what I want to do. I only know how I want things to appear to function when I'm finished.
I have built a very "simple" relational database to be used by authors who collect sentences or sentence snippets for use/inspiration in writing. There are three tables:
tblPhrases contains an autonumber field idxPhrases and a memo field Phrase.
tblTags contains an autonumber field idxTags and a memo field Tag.
tblTagsToPhrases contains an autonumber field idxTagsToPhrases and two number fields: Tags_index and Phrases_index
The first two tables require that all fields be unique.
Clearly (or not so?), the third table is the many-to-many connection. It allows for there to be many tags associated with a phrase and more than one phrase to be associated with any one tag.
I have figured out how to set up a form and subform but it looks clunky as you can see and it's not at all what I had imagined.
What I really want instead of the dropdown combo box in the keyword/tag subform -- which does populate from tblTags and when I select something, correctly populates tblTagsToPhrases and when I return to that Phrase in the form, displays the list of associated tags...
What I would really like instead is to have the values in tblTags appear in a "Tag Cloud" like on a webpage. Then I can click on the hypertext control for that value and it will populate a text field, adding commas between the selections. However, behind the scenes, it's really just adding to tblTagsToPhrases. I should also be able to type in a new Tag right there. Basically, treating the field like a Tag field on a bookmarking site.
And if I were really honest, I'd like to be able to display the phrases as hypertext too because that would look much less clunky and less like a database.
Can anyone give some direction to get from where I am to there.
Thanks so much in advance for any and all help!
You need VBA to do this, using the Timer event of the form to move labels around randomly, using some detailed maths to get them to move in a direction-of-flow, rather than completely random. Each label (or textbox) would first have to be populated with the field-values. If you only want a static tag-cloud then you wouldn't need the the Timer event.
If you don't know VBA then you'll have to search but I think it unlikely that you will find an example of this (and if you do, will you be able to adapt it?). In fact, if you get this to work, and include the animation, I would expect it to exhibit noticeable flicker.
I think you should ask yourself if you intend to build a database or a web-application. (If you are struggling with Access, why go even further and attempt to make it do things that it wasn't designed for?)

User interface for addition/deletion of items to a list?

I have a ban list that I'm building as part of an application that displays articles. This ban list will contain keywords, which if found in an article, would lead to the article being disabled(the article will not be displayed on the front-end)
I'm having a tough time visualizing the UI. I could always display a textarea and ask the user to enter keywords comma separated and when they want to delete again the textarea will be presented and they can edit the entered keywords. But I find my idea very unfriendly to the user.
My question is how do I program the UI so that its easy to add new keywords. I also would like to be adviced on a nifty way showing the existing keywords and also deleting them.
This ban list will be part of the admin panel/backend and will be accessible only to the site administrator.
How many banned words will there be? If a handfull then your suggestion of a comma separated list makes sense - perhaps sorted alphabetically when re-presented for editing.
I speculate that the list could become quite extensive, and hence perhaps you would need to present several pages of excluded words. In which case, some form of paginated, alphabetic display, with a little (x) beside each entry to permit deletion.
And a separate entry field which would accept single words and add them into the list, displaying the relevent page might work.
One other thought: will your list contain profane or otherwise potentially offensive words? if is possible that representing the list could itself be offensive in some way? You may need to find a way to O??????e the O??????e. Which might present a few challenges.
I would display them as a list, with a textfield at the top or bottom to add new ones.
Add an icon to each to let the user delete it, and implement both adding and deletion by Ajax: then you can sort the list before redisplaying it.
(Actually, you could do that all in the browser with Javascript and not use Ajax: in that case you'll have to pass the whole list to the server when it's needed).

best way to present huge html forms

My application has a requirement such that I have to display a huge number of HTML input textfields (maybe 2,000 text fields). The fields can be logically grouped into sections and the sections are repetitive. What is the best way to display it to the user so that they can enter data with minimum clicks?
I'm not sure what kind of users you have that would willingly sit through 2,000 text fields, but if it's a requirement, then you do what you have to. :)
You say it can be grouped into sections and the sections are repetitive. I'm not sure what parts are repetitive, but managing the sections carefully seems of utmost importance. Some sort of Javascript hiding/showing seems likely to be a big help... I think I would choose JQuery's Accordion effect or something similar.
You could add Tab key events to each section in order to assist with navigation and open a new section once an old one was complete. Adding change events to the fields might assist with that as well.
If you need to break the form up across multiple pages, then you'll probably want to utilize AJAX to load new sections/pages and store the submitted data into a session until the user is done.
Depending on the format of the required answer, there are two ways:
If the answer is of a known length or the answer is one of a few choices, you may auto-advance the cursor w/some javascript/jquery. For instance, if you're expecting phone numbers, when the person enters the 10th digit in the box, move the cursor to the next box.
If you don't know and you can't apply (1), the quickest way is to encourage users to tab their way through the boxes.
Speaking of tabs, if the boxes can be logically grouped, you could create tabs and have the users page their way through the questions. This will create more clicks, but will improve user experience.
But holy crap, 2k text boxes on one page is crazy!
I work on a similar product, and perhaps the number one thing would be to make sure that tabbing between fields works logically and quickly. The people who do data entry on this type of thing are lightning fast and fairly mindless (I don't mean that in a pejorative sense), typing in numbers from a log or printout without looking at a screen.
Apart from that, we implement tabs (like tabbed browsing) on the page, group boxes, and other things like "dynamic lists" which is like a data grid of text boxes that the user can add and delete rows from client-side.
Paged format, like a survey? You could then use SESSION to store the input for each page and retrieve the prior answers when the user switch between them. Another method is to use ajax to navigate between different . I think the issue is not the number of clips, but 2000 textfields is going to look scary on just one single page.