Javascript textbox autocomplete clears drop down selection - javascript

Morning folks.
Novice Rich here once again requesting assistance.
I have just started dabbling with javascript and although I have set up a few onclick/change for setting the focus of radio buttons,that's pretty much my limit.
In my c# code behind, I would like to have an 'onchange' function whereby once a client starts to type in my autocomplete textbox, a drop down list (which is likely to have been populated previously) is reset/cleared to it's original state.
Anyone got any ideas how to do this?
(Chances are I haven't exp[lained myself very well here)

What you want here is to start exploring jQuery. When you find yourself familiar with it, create a server-side ASP.NET Handler that returns JSON data to your jQuery.getJSON call and from that, populate your autocomplete textbox.
Or, you can of course not reinvent the wheel and just use one of the plethora of jQuery Auto-Complete plug-ins available out there. Whether you'd still need the server-side handler to provide the auto-complete plugin with data depends on your use-case, but in most cases you'd get much better performance out of pre-populating the data when the page loads.

Related

Using a forced suggestion mechanism using JavaScript and jQuery (ASP.NET MVC project)

Yesterday I discovered that jQuery is really powerful and can do amazing things with only a few (sometimes just one) line of code, amazing! I did some animating which went really well!
So I was wondering if the following is also possible/ simple to implement with jQuery (if not, please tell me what could do this):
Basically I want a suggestion mechanism for the webapplication we are creating. We are doing this using ASP.NET MVC 4. By suggestion mechanism I mean the user gets presented with a textfield, he can start typing and based on his typing topics (I have a model class Topic with a few properties) get suggested. The user can ONLY choose out of those topics, they can't define any by themself. So I would like to generate a list based on the input (with each key tap). If they click on an item, it gets added to the box and they can choose other topics if they would want to.
I do realize that this is probably rather difficult to implement, but it would be great if I could find a tutorial or example. Preferable with JavaScript or jQuery, but if that's not possible anything will do really!
If my explanation is not clear enough: I mean something similar to the StackOverflow suggestion mechanism for tags.
If you want suggestive text field, search for html5 datalist datalist
Also take a look at JqueryUI Auto Complete
However if the options are not too much, i would go with select menu instead of text field.

How to add Constraints between Form fields of HTML forms?

I was wondering if there is already a framework or a jquery plugin which i can use to add constraints to form fields. With "constraints" in this case I don't want to say that field x is an e-mail field and needs to be validated as such but i want to define relations between form fields like:
If there is something selected in checkbox A --> enable Button B
If there are at least X entries selected in list A --> enable form field B
and so on and so forth..
I'm currently on the point of implementing it myself but I wanted to make sure that I don't reinvent the wheel.
It could be any JavaScript framework (standalone or jquery plugin).
Why a plugin? This is fairly easy with just jQuery:
$('input.A:checkbox').change(function() {
$('button.B').prop('disabled', !($(this).prop('checked'));
});
$('select.C').change(function() {
$('button.D').prop('disabled', !($(this).find('option:selected').length >= 10));
});
We're just assigning handlers to the events that happen when the inputs are changed - and I enable or disable the field depending on my condition.
I think it's better than getting a plugin because:
You're saving on HTTP requests for more files
You're saving performance by not loading more JS code
This is fairly simple as-is and there's no point to overcomplicate it.
See demo
If you use something like knockout you'd be able to make use of the knockoutvalidation framework.. or, in the past I've used jqbootstrapvalidation... the latter obviously requires bootstrap as well.
There are quite a few code samples on both sites & both frameworks are pretty easy to use. Feel free to comment on this post if you need any more specific help/advice.
Just a word of warning. If you do use knockout. Go with knockoutvalidation, and not bootstrap validation... or you'll have sleepless nights trying to get the 2 to play nicely.
Here is a jQuery plugin you could use:
http://github.com/keyo/jQuery-Form-Dependency

How to create a custom "autocomplete" asp.net mvc, (like google)?

I'm just hoping to get an idea on how to go about creating the following functionality on a screen. I've been using webforms in the past so I felt the need to get over it and start using MVC before I get left behid, so to speak.. thus the project is in Asp.NET MVC, (& JQUERY, but have been getting more comfortable with it lately), so I feel it should be do-able at this point)
I basically want an autocomplete. The employee no textbox should act as input, and as the user types, the items below should render/be visible & update, something to that effect. I'm id like to colour code them by relevancy/or by time.
I think I've got the following problems/questions.
1.) How would I submit without a button click.
and my controller would return a JSON result (I'm assuming would be the best route)
2.) Update/Render my results without redrawing/posting the page
3.) Applying the colours (but its minor at this stage)
I know its asking a lot. So thank you in advance.
Any links of tuts would be appreciated as well.
UPDATE
I just relized that how google's search is working would be a perfect example. Autocomplete on the textbox & results start displaying as you type
As your using jQuery and MVC3 the default MVC3 template aslo contains jQuery UI with has an autocomplete widget that is easily adaptable to what your after.
http://jqueryui.com/demos/autocomplete/#remote
Have you considered usign jQuery UI Autocomplete?
It seems to be valid for all the points that you mentioned.
You can check it out here:
jQuery UI Autocomplete

JQuery sortable/selectable plugin with drag'n'drop?

First of all, I'm not a JS developer, so I apologize if I'm asking a rather too general, previously asked or complex question. The functionality I'm searching for is that I'd like to have two HTML lists, on the load the first one is empty and I want user to pick the items he like from the second list and drag them into the first one (which should be sortable so user can set the order he likes). Is there a easy to use plugin for it?
I really like the idea and look of those two plugins..
http://www.emposha.com/javascript/fcbkcomplete.html
http://loopj.com/jquery-tokeninput/
http://code.drewwilson.com/entry/autosuggest-jquery-plugin
There are doing something different, but those "bubbles" in textfield are a great way to handle it (from UX point of view). Just to be able to have an empty text field, available bubbles below it and to be able to drag them into the text field, just those user wants (no autocomplete functionality, just draging from some list of them, maybe sorting in text field available would be nice). Maybe there's a similar plugin to do that.
Another thing is, it's a part of a form so I need to be able to send those picked up elements to the server with the form, each with it's position. I know, I am asking too much but any help will help me.
Try to use Jquery UI
Here are links for demos
http://jqueryui.com/demos/sortable/
http://jqueryui.com/demos/droppable/
EDIT
I think all you want is this
http://jqueryui.com/demos/droppable/#shopping-cart
Maybe jQuery UI would work for you; it is composed of several handy helper functions.
Take a look at sortable with connected lists: http://jqueryui.com/demos/sortable/#connect-lists

How to translate this Silverlight control into HTML/CSS/JS

I am in the process of converting a Silverlight app into a standard Web app (ie all HTML, CSS and JavaScript via jQuery 1.4.4). I'm not the most experienced when it comes to web development, so I am wondering what would be the best way to convert this custom Silverlight control into a web equivalent?
It boils down to just being a fancy radio button group. The user can click on any type, and only one type can be selected at a time. For the web equivalent, it needs to set a value that will get POSTed to the server.
For now I am just using a standard <select> tag which is of course functional and doesn't require JavaScript (which is nice), but ultimately is not going to fly. I will place a <select> inside of a <noscript> tag to allow non-js people to still be functional.
Can anyone recommend a good approach for tackling this? Any existing plugins/controls out in the wild I could take advantage of?
(I am using ASP.NET MVC 3, but I don't think that's very relevant here)
I would use a <ul> and make the selections a <li>. Styling is easy enough to apply to that, and there are tons of samples online.
Place a click on the li using jQuery to disable. If you are going to disable other selections, you should also include a reset/clear type function to they can choose again in case they made a mistake.
Think of them as an array of buttons. When one is clicked, all others are unselected. Draw a rectangle around the one that was clicked and set a hidden form field equal to the value you expect when the form is submitted.

Categories