Develop Reference

How to achieve suggestions in input field

Hi I had come across a question how to achieve suggestions in the input field while typing for example (in browser url bar while we typing first 3 to 4 letters it give suggestion if the url is correct we go with it else with single delete key press remove the suggested content). This need to be done with input field. Is this scenario is possible? Thanks.

There's a big range of possibilities here.
If the contents of the list are static or easily generated via code, you can use a native HTML <datalist> element.
If you are wanting autocomplete in the form using the user's previously-provided data, you can just enable via the <input autocomplete> attribute
If you're wanting far more customization, it's going to have to be some JavaScript that does the dirty work for you. Stack Overflow is not a good forum for getting library suggestions, but you should survey what's available in your current development stack.

This is absolutely achievable, have a look at - typehead.js
It's a javascript project for doing exactly what you're asking, I believe it's compatible with boostrap too.

Autocomplete suggestions are a very common Web Component. If you are using jQuery, you might want to try this component published by Materialize. If you are using, say, Polymer, you might want to try paper-autocomplete. If you are using vanilla javascript, you could try typeahead, or something like this autocomplete library. Most other modern web frameworks will have some alternative. I wouldn't really recommend making one from scratch.

Selector for styling in jquery plugin to a void conflicts

I am new to jQuery. I recently develop a plugin bu using jQuery UI widget factory. It is working fine. I was using inline styling. But It will get complex for large files.
For the large project I have the option to use classes. But when if someone wants to use my plugin he'll simply copy the link and use it. But If he has same name of classes on his page then its page will be destroys because my of my styles. Can anyone please guide me how to avoid this.
I hope you get the point.
Thanks

Some things to consider:
If you make a selector that is too specific, like
$("ul > li > .foo ~ .bar");
it may break by any changes on the markup.
However, if you don't, it will break your user's style.
As commented, the easier way to fix this would be adding an prefix on the class, like
<div class="my-plugin-container">
<span class="my-plugin-span"> "Hello World" </span>
(OR) <button class="my-plugin button"> </button>
</div>
If you could post any code we could be able to help you further. I'll edit it according when you do.
Best of luck

Taking a div element with JQuery and a regular expression

We are working in a Rails application with Prototype and jQuery (we want to remove Protoype at all, but is a migration and we have to do it progressively), and we have a form that can add many fields with jQuery. This fields have a very weird ID:viaje_contratos_attributes_0_cargas_attributes_1385986834726_punto_attributes_municipio
In this field, we need to work with autocomplete jquery, and our problem is take this ID. We've tried the following code:
$('input[id$="_punto_attributes_municipio"]').autocomplete({
source: $('input[id$="_punto_attributes_municipio"]').data('autocomplete-source')
});
What's the problem? What we have to modify?
Thanks in advance!!
Updated [12/02/2013 - 15:35]:
Thanks Jacob Bundgaard for your replies, but still not working :(. But you have made me to think and maybe, because this form is created after load the view with append function, your answer maybe not work for that? Could be?
Anyway, I hardcoded the ui class ui-autocomplete-input and autocomplete="off" but still not working :S.
A temporal solution, obviously, have been coding inline, after the div appended, the jQuery script

What about using a class instead of using id's for something for which they were not intended? That'll make your jQuery significantly simpler, and will probably only take a minor change in your Rails-code.

Disable caching of a textarea in firefox

First off, I know this question is similar to: Firefox cache textarea value? but mine is slightly different (I think, I'm very inexperience at HTML).
So I have a
<div class='class'><div id='message'><textarea id="msg">msg</textarea></div></div>
I'm trying to disable caching so that when I refresh, it grabs the textarea concent from the server, not from the browser. But I'm only trying for just this textarea. Unfortunately, the contents of the textarea are generated by code, not hardcoded. Can I stick the "autocomplete=off" attribute in one of the divs and will it filter down to the textarea? Or do I have to find out where the code is generated for the textarea and modify that?
[EDIT] (from comment-has-an-answer)
So because I don't have control over the markup fields, I had to write a jquery that matched the specific textarea ID. Maybe next time people will actually read the question...

As r92 states in this other Stackoverflow answer:
For textarea only:
<textarea autocomplete="off"></textarea>
For all form fields
<form autocomplete="off">
For a javascript solution
document.getElementById( "msg" ).setAttribute( "autocomplete","off" )
For a jQuery solution
$('#msg').attr('autocomplete','off');
Preventing Firefox from remebering the input value on refresh with Meta tag
MSDN Reference and MozillaWiki Reference
The attribute has to be on a form / form-field (never tested) and i don't think this 'attribute' is inherited. So NO, you won't be able to stick it to an outer container.

I am pretty sure autocomplete="off" has to be on the textarea itself. You could apply that post render using javascript/jquery:
$('textarea').attr('autocomplete','off');

All you need to do is to add autocomplete off in your textarea.
So this should stop browser from remembering you info inside of textarea
<textarea autocomplete="off"></textarea>

So because I don't have control over the markup fields, I had to write a jquery that matched the specific textarea ID. Maybe next time people will actually read the question...

Do you know of a javascript library that lets you embed textareas that update a webpages format in real time?

I'm introducing some at-risk kids to HTML in an upcoming class and we have a very small amount of time to show them how cool making your own web page can be.
What I'd like to do is build a page template full of text boxes which the kids can fill with text and some simple formatting tags. As they update, a split screen would update with the results of their edits.
I'm looking for a free / open source jquery or other javascript library which would help achieve the goal above.
Actually, it would quite similar to what stackoverflow does in the preview box as you are typing a question.
Rather than just blindly lifting code from other websites, I would love something with actual documentation (or at least a quick example.)
Google searches show a lot of tools and things you can download or use on other sites. The ideal here would be a library I embed in a page and position as I see fit.
Thanks for your help
Edit
As pointed out by some folks - this is a simple matter of updating divs on certain events.
<script type="text/javascript">
$(window).keyup(function(){
$('#about_me_result').html($('#about_me').val());
});
</script>
<textarea id="about_me" name="aboutMe" rows="9" cols="60">Write a little something about you...</textarea>
I went with keyup since keydown always leaves the last character off the other element.

No real need for a library. Just update the document
$(window).keydown(function(){
$('#element').html($('#sometextarea').val());
});

As btown suggests in his reply below, you could just send them to jsfiddle.net.
Or, if you want to put something like that on your own page somewhere, you could cook your own! play around here: http://jsfiddle.net/lbstr/LD9kA/
<textarea id="code"></textarea>
<div id="result"></div>
$('#code').keyup(function(e){
$('#result').html($(this).val());
});
Or, maybe you want an "Update" button instead of updating on keyup.
<textarea id="code"></textarea>
<button type="button" id="update">Update</button>
<div id="result"></div>
$('#update').click(function(){
$('#result').html($(this).val());
});

What about w3c Schools Tryit Editor it's much simpler than jsfiddle.
The only thing is you have to press a button to see the HTML update. That's probably not a bad thing though as if it changed on every key up the resulting web page might go crazy as you typed in half finished tags and attributes.