has anyone ever seem an autocomplete solution in JS that works like Chrome's Console? (I think this is in version 17+)
I am trying to build something using jQuery, but I can't imagine how the autocomplete placeholder that stays below the active text follows the cursor.
All the autocomplete thing, the search, sort, etc... I've already done, I just need a way that the placeholder follows the cursor. Thanks.
Well, why not to use a text box and to call function on any key press/key down. Then the function will read the text that is currently enter and check your data structure for possible end of the word.
You can sort the possible answer and to write the first one for example with other color. If the user press space or enter to color the whore world with black, and if it is press tab to switch with other possible answer...
Do you mean this?I can write some code to show you want I mean if this is what you need?
Related
I'm writing a chrome extension which helps the user type things on twitter. When writing a tweet on twitter, twitter opens an editable div container. When the user types into it, twitter (which is using some web-framework presumably) generates sub-divs and spans with the text the user types and places them within the content-editable div.
The thing is when one manually changes the span value (for instance, through inspect elements), and then types something again, the value in the span will just revert back to what it previously was (before the inspect elements edit). This is probably because the actually typed string is stored somewhere in javascript, and everything gets overwritten again when the user types into the div.
I've been trying to find a way around this using JQuery but with no success. I don't really know how to start. If it were just a regular input tag, you could call something like $("input").val("new value"), easy-peasy... but I don't know how one could go about doing that for an editable div that gets updated by javascript running somewhere on the page.
For a while, I just thought it would be impossible...
BUT NOW I do know it is possible. If you download the Grammarly extension and use the Grammarly popup-editor (which opens a new window to edit text), then submit that, the twitter editable-content div updates appropriately and everything works like magic.
Sorry if this isn't a standard programming question, but I couldn't find anything on the web that comes close to what I'm trying to do. Maybe I'm just not experienced enough and am missing something really obvious. I tried looking at the twitter and Grammarly source code but it's all minified garbled javascript that I can't read...
Thanks for any help and insight!
EDIT: the twitter url in question is: https://twitter.com/compose/tweet The div in question is the one with contenteditable="true" attribute (you can search it in the inspector)
I'm waiting for user input like this:
prompt('hello', 'world');
I don't understand why my prompt defaultText 'world' is selected.
Not a big deal, just curious, but I'd like to focus on first character without selection.
Is there some kind of placeholder for javascript prompt box or a way to do it (in pure javascript) ?
Well, it's a UX feature. The default is "world" but if I wanted to override it, I can just start typing, it saves me from selecting all of it. If I wanted to append to it, all I need to do is press the left arrow.
prompt(text,defaultText)
The default input text shown as selected to save user time to override it easily. All browsers are doing same except Safari.
I have been trying to highlighting multiple search result hits in the textareas - multiple textareas - of a form.
After much searching and many trials I found a solution while I was preparing this question for S.O. but before I submitted it. I thought it worth recording here to save time for anyone else with the same problem. I hope this is an acceptable thing to do on S.O. If not, moderators, please delete.
In the app I'm working on, users enter text and it is stored in MySQL where each record corresponds to a form. Users can recall any record for editing, and when they do, they will be presented with the previously-entered data in text areas again to modify. This all works.
Now, I've implemented a search function to search the whole table, and when the user recalls a record, I want to present it in the form for editing, with any and all search hits on a page highlighted - e.g. like this:
(source: informationtamers.com)
That's simplified, the actual form is longer, so the user may not notice other hits on the page.
I've made it work with a highlight for the first occurrence of the hit string if it's present in the form, but the problem comes when the string appears multiple times in one text area, or in multiple text areas on the same form.
I have tried these approaches:
setSelectionRange: This is the only one that even half-way works, but highlights only one string per form. This makes sense because AFAIK you can't have more than one item selected in an html input field or form and as a UI for someone looking for the results of a search it's not very user-friendly.
add style at the appropriate points in the input text: <span style="background-color: yellow">ZZZZ</span>
I didn't expect this to work, as it's input in textarea, but I did try it and it just shows the html. (For the record, the user's data is escaped immediately it's submitted.)
Invoke the browser's own search facility and pass it the search term. I failed to find any way of doing this on three counts: I can't find a way to trigger Ctrl+f programatically, inject the search term into the browser's search box and initiate the browser search programatically.
Johann Burkard's 'highlight' jQuery plugin. http://johannburkard.de/blog/programming/javascript/highlight-javascript-text-higlighting-jquery-plugin.html
This is capable of highlighting multiple entries on a page, but not in textarea fields, which as far as I can see it ignores. I believe I've set it up and invoked it correctly, because I can get it to highlight multiple text area captions on the page. It works by adding <span class="highlight">Search result</span>.
This http://frightanic.com/projects/jquery-highlight/ from frightanic gives results the same as Burkard's plugin.
This http://www.jquery.info/The-plugin-SearchHighlight from Renato is targeted at search engine results, so is not my use case.
This http://jaspreetchahal.org/examples/jquery-onpage-text-highlighter-and-filter.html filters out paragraphs that don't contain a matching string so I didn't try it, but the demo shows that it uses <span style="background:yellow;color:#000000">Search result</span> to highlight, like the others, so I doubt it would work on text areas.
The one that, after some playing around, did what I wanted: http://bebo.minka.name/k2work/libs.js/jquery/2.1.0/highlightTextarea/
Some points to note.
The text areas must not be resizable. The documentation says this, but also documents an option 'resizable' and says that the jQueryUI Resizable is required. I tried this and it did not work. I guess it was an intention but was not debugged, as the author says he's no longer working on the plugin.
I'm using this with colorbox, and found I had to .highlightTextarea("destroy") and then .highlightTextarea("disable") when user leaves the form, or the highlights appeared when viewing records that had no hits.
In some circumstances, the CSS conflicted with mine and messed the form up, so when the user cancels the search, I .remove the form from the DOM and rebuild it. This is probably due to the way I'm using the plugin, and not the best solution, but I couldn't find how else to resolve it.
The result now seems to be solid, and provides the effect I was trying to find for so long.
When im writing on chrome for example (got to work on all browsers) on the textarea in my site, and im pressing CTRL+Z, its deleting everything i wrote until the last "/n". Is there any way that i could make javascript save texts, so when a user will press CTRL+Z its will go to the last point when javascript saved the data?
For example, i would love to save the data every time a user click on backspace or a button that changes the textarea. its preety similar to the undo, redo buttons on stackoverflow.
Some kind of a string list isnt good for me, im looking for a built javascript/jquery way of doing that, if there is any.
You can have a look in this library
http://dmauro.github.io/Keypress/
It's allow you to detect all input, so basically you can store it on any letter typed, or at least save the text in the textarea everytime a special key is pressed.
It's also really easy to detect combo.
Hope that's help
I'm trying to implement a user-friendly way to copy some text from a text input field to the clipboard on iOS/Safari. I understand there is no way to programmatically do it on this platform, but I was hoping I could guide the user experience as much as possible.
On iOS/Safari, when a user manually highlights some text, a contextual Copy menu pops up. I was hoping the same menu would pop up when the text is selected programmatically, but it doesn't. Is it even possible to do that?
If not, any advice on how to best implement a user-friendly experience to copy some text to the clipboard on iOS/Safari?
For reference, I'm selecting the text using the method described in this question:
Programmatically selecting text in an input field on iOS devices (mobile Safari)
It's not possible unfortunately. I'd include some informative text below the input, hopefully that will work out okay in terms of user-friendliness.
Another option would be to go native, e.g. by wrapping using PhoneGap, but I guess you are already well aware of that option. If so, something like this would work in native code:
[UIPasteboard generalPasteboard].string = #"your string";
From javascript it is possible with the help of iOS (objective C).
var getVal = $("#textid").val();
localStorage.setItem("getVal",getVal);
and then you can use your native code for getting this value from local storage.
I haven't knowledge of objective C but you can use that's method after js code.