HTML Form text input suggestions box - forms

I am attempting to modify one of my text input boxes in a form that I have. I would like suggestions to pop up as the user types. Basically, I would like to emulate the "Tags" box that is on the ask question pages here on Stack Overflow, but with different data as the suggestions obviously. How would I go about doing this?
For context, this is for a club at a college, and I am trying to allow members to type in their majors and as they type have a suggestions come up.

This snippet from Cena Mayo did just what I was looking for:
<input id="color" list="suggestions">
<datalist id="suggestions">
<option value="Black">
<option value="Red">
<option value="Green">
<option value="Blue">
<option value="White">
</datalist>
Documentation

jQuery has an autocomplete plugin that you could use.
It depends on what kind of language/platform/etc. you are using as well. I am a primarily .NET developer and I've used the following:
SQL Server for storing data
Web Forms or MVC for the web app
An ashx handler to retrieve and format the suggestions
jQuery plugin above to render the results returned from the ashx underneath an input box

Well if you want to get information from a database on commonly used or already created elements you'll need more than just html. If you just want the form to suggest things people have already input in their own browsing sessions the form will do that automatically.
What I can point you towards is this guys post. He outlines and gives the basic code to get you started on the path for auto suggestion in forms He even gives you the files to get you going, but you'll have to do some modification work.
Also included later in the post somebody adds this to go into the ajax_framework file.
`function clearsuggest() {
e = document.getElementById('results');
e.style.display="none";
}
`
In search.php:
onClick="fill();clearsuggest();return false;"
That section of code will clear the suggestions upon click of a suggestion. Hope this helps and good luck.

Related

Wagtail. Ability to edit html within editor

My editors want to have an ability to edit raw html within editor.
For example, we can have simple list markup:
<ul>
<li>Some text<li>
</ul>
Or with custom classes and event tags:
<ul>
<li class="my_class">Some text
<span class="special">Some additional info</span>
<li>
</ul>
And so on.
I know that built-in Draftail doesnt support html editing.
But using third-party editor comes with problem:
Losing integration with system. For example, i cant just put image like with draftail. Or, preview mode cant handle all functionality of third-party editor.
So, maybe someone has working solution for this situation.
I thought about using special StreamField panels, but it seems to be overhead of blocks. Dont like this idea of having lots of blocks with little differences
Wagtail does not support raw HTML editing within the page editor out of the box intentionally. The philosophy (zen) of Wagtail is to help editors and developers 'wear the right hat' when working in Wagtail.
HTML editing is usually best provided to developers, where there is an expected knowledge of what is required for things like accessibility, security and the benefit of tooling (like git).
However, if HTML editing is a must, you will probably need to build your own editor field for that purpose or find a suitable package that works with HTML markup such as django-markupfield. Adding image/snippet/page chooser functionality however will have to be built for whatever you end up using. You may also want to look at the Wagtail markdown package either as an alternative to HTML or a starting point, it allows for a syntax of linking to pages/images.
Wagtail lets you use any kind of Django field or widget with the FieldPanel.
Please ensure you consider all the risks when implementing this feature, such as accessible HTML (e.g. heading levels), security (disallow some tags such as script tags), malformed HTML leaking into the rendered template and of course the end user experience.
At the end i made my own solution
Simple rewrite some methods in wagtail`s Html DbWhiteLister and HtmlConverter.
This gives me an opportunity to allow any tags with any attributes.
https://github.com/Chenger1/wagtailtinymce.-Full-Rich-Text-Editor

How to disable native "datalist" / autocomplete in Google Chrome?

and thank you in advance. I am experiencing an issue with Google Chrome today. I have made the decision to implement a JS plugin called awesomplete, it is a autocomplete plugin. The plugin works wonderful in every browser except for Google Chrome. The plugin works, except Google Chrome is ignoring my autocomplete="off" pleas and throwing in its own suggestions which, of course, appear OVER the awesomplete's generated content.
Whenever I type into my input, Google Chrome automatically creates a menu below the input, exactly as if there was a datalist attached to the input (which there isn't). This false "datalist" appears over the awesomplete suggestions making the plugin useless. I have searched and searched without success. I have tried both autocomplete="false" and autocomplete="off" on the form, and on the input. I also have aria-autocomplete="off" on there even though I'm not sure what that does. I have even tried a suggestion from others to put to "fake" inputs at the beginning of the field, so that Google Chrome's autocomplete feature will attack them instead of the real input. Yeah, no go.
Most of my users are using Google Chrome, so this is a problem for me. Is there anything I can do? Or I'm I left helplessly powerless to the browser, who for some reason the devs decided to take form matters into their own hands.
<input required type="search" data-list="<?php echo $list; ?>" class="awesomplete" name="gameSearch" size="50" placeholder="Search for game titles here!" autocomplete="off" aria-autocomplete="list">
$list is a generated list of game titles courtesy of some php before the input.
Any advice or help is greatly appreciated...
I am pretty much sure chrome does it by matching the 'id'/'name'. At this point of time, I guess there is no solution other than removing them off your datalist.

Angularjs - date/time stamp

I am trying to figure out something using angularjs. Basically, today I decided to add a time/date stamp in my form. In other words, when someone is trying to post something, the time and date will appear.
Since I have a form with a live preview, I was trying to connect the time on the live preview. Afterwards, the time stamp would get published so that I could orderBy the comments from most recent to less recent.
I have two plunkers. For some reason, I couldn't get the code to properly work. Instead of showing up in the live preview as it should, it doesn't at all. It will on the form though. The first plunker has the bare minimum code, and is shown in the following link, while the second plunker is at the bottom of this message.
http://plnkr.co/edit/zgqXGGpoOw3UY90qT23H?p=catalogue
I will still display a portion of the code here, which is where my problem lies:
<blockquote ng-repeat="review in product.reviews | orderBy:'date'">
<b>Date: {{review.date}}</b>
</blockquote>
<form name="reviewForm" ng-controller="ReviewController as reviewCtrl" ng-submit="reviewForm.$valid && reviewCtrl.addReview(product)" novalidate>
<blockquote>
<b>Date: {{reviewCtrl.review.date}}</b>
<br/>
</blockquote>
<!-- DATE AND TIME -->
<!-- The other time formats are at the bottom of this page -->
<div ng-controller="timecontoller" ng-init="init();">
<div ng-model="reviewCtrl.review.date" ng-repeat="date in dates">
<b>Date: {{date.date1 | datetime}}</b>
</div>
</div>
</form>
While the second plunker has the whole viewable portion so that you can visually see the form (I removed certain elements though to make it easier to see). You'll have to click on the word "Review" first.
http://embed.plnkr.co/hHm1OPHk1uFD6YP2Roju/preview
If i followed your code correctly, it seems that you are trying to assign the review date with this line:
ng-model="reviewCtrl.review.date"
but its really not being given a data model or binding. If you truly wanted to transfer your timecontroller time update to the reviewController then I would recommend not using that as a controller, but instead refactor it as a service. Learn more here. Of course, you could also just open up your timeController scope and use a click event to transfer the data or something like that, but it doesn't seem like it should really be a controller to begin with.
Now i think I ended up changing your code more than it will really help you at all. But here is a quick implementation of how it can be done by making your timeController a service.
Plnkr
Just curious, why do you prefer this to $scope? It was giving me some trouble. Never really dealt with that before.

Tinymce Richtext-editor not rendering macro RTE

I'm running a site with umbraco version 4.11.1 and is trying to render the info of a macro within a tinyMCE richtext-editor without any success.
In version 4.11.1 (and perhaps some other versions before this) Umbraco has a button for rendering macros within tinyMCE. If you click this button it will show all the macros that you have been able to render. If I add a macro, it will render out the stuff I've entered in the macro, within an orange-dotted border, which means that the editor understands that I've added the macro.
However, after I save and publish and enter the page where I've added the macro, it doesn't render anything. I came across some posts when I googled the problem and found out that I could trace the problem using a querystring (?umbDebugShowTrace=true) and look through the HTML and see what has been rendered. I found the following HTML:
<?UMBRACO_MACRO macroAlias="Testmacro" />
...which should render, if you ask the people in these posts.
If anyone had this problem, or know how to solve it. Please feel free to participate.
Thanks in advance.
David
Try
string macro = umbraco.library.RenderMacroContent("<?UMBRACO_MACRO macroAlias=\"Testmacro\" ReusableText=\"1112\" ></?UMBRACO_MACRO>", 1112);
string result = paragraph.Replace("<?UMBRACO_MACRO macroAlias=\"Testmacro\" ReusableText=\"1112\" />",macro);
Best regrads

Stripped Down CKEditor Vs Markdown

I have been looking into why WYSIWYG editors are bad for content creation. The most common reason given is that they output incorrect html. But what if I use editors with reduced functionality?
My requirements are only the ability to italicize, make text bold, create ordered/unordered lists and (maybe at a later date) add inline images.
My users will hopefully be 'persistent' users (small numbers of laypersons using the app frequently)
In this context how do I choose between Markdown (WMD editor) & a stripped down WYSIWYG editor. How would page performance be affected with each? I consider fidelity & reproduciblity of data to be important.
You choose by considering your audience. Wiki markup and markdown is for geeks. Your customers sound like they're probably not geeks so I would suggest CKEditor or Twiki-style editor (good, simple Wysiwyg UI) for non-geek users.
Basic concern: Why force lay-people to learn a markup language when solid alternatives exist?
See the Custom Toolbar editor in this CKEditor demo. Or check out TinyMCE.
OK, I tested both.
Even for my basic formatting requirements, CKEditor generated quite ghastly html
Now this is the input
This actually appears to be better
I hope users understand what we are doing
Lets see
But in the meantime
CKEditor Output
<p> This actually appears to be better</p>
<p> I hope users understand what we are doing</p>
<p> Lets see</p>
<p> </p>
<p> But in the meantime</p>
And Markdown Output
<p>This actually appears to be better <br>
I hope users understand what we are doing <br>
Lets see</p>
<p>But in the meantime</p>
Now if this is the difference between these two for the most basic formatting (linebreaks and paragraphs), what will it be like in a 200 word submission. I think most users will need to know only this
For line breaks, two SPACES and hit ENTER.
For new paragraphs, hit ENTER twice
The rest of the stuff could be learnt incrementally
Is it that hard to engineer a 'basic' WYSIWYG editor?
EDIT
After adding these to config.js above problem is solved
config.enterMode = CKEDITOR.ENTER_BR;
config.shiftEnterMode = CKEDITOR.ENTER_P;