Datalist - fully autocomplete input with top value from list - html

Sorry if this is a duplicate, I can't find a similar question for the life of me.
I'm trying to use a <datalist> input on a form and it works but I need to have it 'autocomplete' the top search result right into the input box as the user types... Let me be clearer:
I already have the functionality working that filters out results based on what's typed into the <input> text box, as you would expect a <datalist> to behave. What I'd really like is for the user to not have to actually 'choose' a value and put it straight in.
This page (and the codepen therein) pretty much demonstrates what I'm looking to do (albeit without <datalist>) - note that as you type, the field is filled out for you with every keystroke - then you can just tab out of the field and keep your value
I have tried the above solution but for some reason in my project it does not work, even if I copy the code out verbatim.
Anyone know how I can acheive this with a <datalist>?
Edit: an image for further explanation - if I start typing 'all', I'd like 'AllStar Sports' to fill out the rest of the feild, as it was the top result:

Related

Auto resize the width of input text area on hidden DIV

I use a Hide/Show .js script that hides some checkboxes and on the right side there is the search field when I click to hide it I want to expand.
Ex.
Before hidding:
Before hidding Image
After hidding I want the search field to be expanded 100%
After hidding Image
I searched for 2 days something and can't find a way to make it expand I use the bTemplate engine to store the HTML code.
Did you try changing the CSS properties through the "setAttribute" method of the elements in question through Javascript? Basically, the code you used to "hide some of the checkboxes" in the first place is pretty much like how you'd write the code to do the other things you're looking to do.
In other words, When you want the checkboxes out of view and the text entry box centered, as in your second reference pic, you could have the Javascript code written through the "setAttribute" method so that when a particular event happens, the css "display" parameter for the check boxes could be set to "hidden", the size of the text entry box can be increased, and the css "position" parameter for the text entry box can be set to have it centered, etc.
That is, of course if I understand your issue correctly. Can you provide the code you are using? I'm sure me or someone else could clarify things more if we could see what you have written.
Hope that helps at least a little! :)

Access UI chart text legend sorted as number

I have searched for a solution but I can't find one suitable on this problem.
I have a chart in access where the Y-axis is text but starts with a number, so up along the y-axis i get this:
I know why, but I don't know how to fix it.
They all have an ID which is fine. I can chose to put the ID on the Y-axis, but then the kW range can't be visualized.
How is this changed?
Changing the text to number is not possible as it needs to be like "a-b kW".
Thanks in advance.
For those who might get this problem, I found out why.
When selecting the data, it chose to use the "Total" function, and "Avg" because that is what the values are. (The picture below says "Group By" but it was automaticly set to "Avg". I just forgot to change it when i snipped for stack.
That results in:
But if i remove the "Total" function i get this:
So, removing the "Total" function works here...
In your query, can you sort by ID, but not display it (e.g., in the query designer, sort 'descending/ascending' on the ID field, but clear the 'display' check box)?
As an aside, I've always had a tough time with Access charts... on my last project, the customer wanted a rather complex bar chart, and I ended-up drawing and resizing rectangle objects to get the look that the customer wanted.

SSRS Report Builder Center Data Bar Data Label in Column instead of on the bar

I am creating an SSRS report in SSRS report builder 3.0. I currently have a table where the rows have a Data Bar inside of the cells. I cant figure out how to get the data label to center on the row. I tried selecting center under the Data Bar "Custom Attributes for "bar label style" and also under the Data Label under "position". Both seem to just center the label on the Data Bar itself not on the row.
I'm under the reputation limit or i would post an image of what I'm talking about.
Image link of current configuration http://imgur.com/lmvl9dI
I realise that this is an old post, but I stumbled across this forum searching for an answer to the same question. Unfortunately, I have to agree with Christopher, in that there is no way around the issue (that I know of).
However, I have used a very simple workaround that displays the data bar and values neatly, and thought it may be useful for others.
Quite simply, I have added another column to the right of the data bar, and have entered the same field. I have then removed the borders between the two textboxes, so that it displays the data bar to the left with the values aligned to the right.
While this does not provide an answer to the question as such, I hope that it may help others with the same problem in the future.
I suspect, unfortunately, that what you seek is not possible. The reason being that the label is a part of the bar. The label is defined for the entire series, and for each label, it is positioned relative to the bar itself. Relative to either the start or the end or the middle of the bar, but not relative to the chart's container.
What I imagine you wanting is to define something that is centered in the cell itself, which would have to be a direct component of the cell (e.g., placeholder, entered text). Unfortunately, when using a databar, you cannot add anything else into that cell.

HTML UI question - can I have a checkbox inside an INPUT type=text box?

I'm replacing a winforms screen with an html interface, which needs to run in IE7/8/9 & Firefox.
Currently on one of our screens we have a funky input control that looks like this:
The user can enter a value in one of three ways:
the user can just type into the box
the user can select an item from the dropdown
the user can tick the ‘Unopened’ checkbox, which effectively chooses a known item we call ‘Unopened’
There’s also a search button ‘…’ but that’s another control which is easy to implement.
I want to rebuild this using html and am wondering how to replace the Unopened function, as (a) and (b) are easy enough. I’m thinking I’ll just put a separate Unopened checkbox beneath the INPUT box instead of inside it, because that would be simpler. But if there's a way to keep it looking like it does now I’d probably prefer that. Is that possible?
UPDATE:
Secondary question: if I do put the checkbox inside the INPUT box using CSS am I just bringing upon myself a lot of pain with quirky little usability or layout problems or is this something that's not too unusual or hard to do?
You can put it in a separate div and then position it with CSS to look like it's inside of the input field:
#checkbox {
position: relative;
top: -10px;
}
or whatever values you need...
Regarding your second question: Nope. It's not actually "inside" the box, it just appears that way. All the functionality will still be there. =)
http://jsfiddle.net/BdBTy/ is a quick example of how this works.
place the check right below the textbox in html
in css for the checkbox put
margin-top:-25px;
(or whatever exact number you need)

Hide arrow in standard dropdown?

Is there a a way to hide the arrow in a standard dropdown select fieldset?
Fiddle link
I have an autocomplete system where you fill in the organisation number of a company and it finds the info based on a database. I'd like to have the select box, but without the arrow..
I need it to do this as it's a double function form, either you can fill in your ORG nr or just manually type it in, pretty simple, probably used all over the internet.
Thanks :)
Kyle,
Usually autocomplete systems use input text elements instead of a select element. This creates what you are trying to achieve. Google is a classic example of this.
If you want, you can take a look at jQuery's autocomplete plugin to get another example and some code ideas, or whatever. http://docs.jquery.com/Plugins/Autocomplete
It's not easy, but you can fake it by putting a button above a Select that has its size property set to a value greater than 0.
Have the Select hidden and positioned absolutely under the button. Clicking the button shows the list. Selecting the list changes the text on the button and re-hides the Select.
This way you need a text box, because you cannot type anything in <select> tag.
And put an onclick event to this box to open autocomplete with all possible values.