0

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.

Improve this question
6
  • 2
    The jQuery UI Autocomplete plugin is probably a good place to start. It contains most of the functionality you're looking for by default, except for the "can't add a new value" piece. Looks like others have tried to simply add this feature to the same plugin: forum.jquery.com/topic/autocomplete-force-selection A Google search for "jquery ui autocomplete require selection" turns up still more results. It shouldn't be difficult to add this feature just from the events exposed by the Autocomplete plugin. Commented Apr 3, 2014 at 17:48
  • Thanks, gonna take a look right away! Commented Apr 3, 2014 at 17:49
  • I tried this simple example jqueryui.com/autocomplete but it isn't working, where do I need to place the example code in my .cshtml? Commented Apr 3, 2014 at 18:13
  • For starters, you'd need to make sure that jQuery, jQuery UI, and the jQuery UI CSS are all included. That can be done directly on the view, in the layout, or probably best via the bundling mechanism that ASP.NET MVC provides. With all that in place, if it's still not working then take a look at the JavaScript console in the browser and see if there's an error indicating the problem. Could be any of a number of different things. If further debugging doesn't solve the problem, the code and behavior would be a great candidate for a new Stack Overflow question :) Commented Apr 3, 2014 at 18:16
  • Problem is I can't place the <script> part in the <head> section because I'm in a partial view, could this be a problem? Commented Apr 3, 2014 at 18:21

1 Answer 1

Reset to default
1

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Well for the Topics there aren't that many options, but I will be needing it for something else which will have hundreds of possibilities.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.