Aeonix 71 Posting Whiz

I wonder if he send you any "information" from his side. Well, that sucks. Had hopes. I guess it's just another one of those. Bye.

Aeonix 71 Posting Whiz

Okay so I did find an answer, but that gives a new place for a bug.

The "solution" is:
https://jsfiddle.net/aL5ta60b/2/
Which centers the red div, and centers it's content. Fantastic.

The problem is. Notice the width: 600px. It doesn't react on that. I mean it does, but it doesn't force it to 600px. It's actually hard to explain what it does, it behave like I size it by % rather than by px. Try to play with size of editor to find out what I mean. It is meant to forcefully push red div to the right, and green to take whatever is free.

Edit: Found it! flex: 0 0 400px;

I knew there was a good way to do it, thanks.

diafol commented: So we have a winner?! :) +15
gentlemedia commented: Flexbox IS the solution for these kind of layout :)t +6
Aeonix 71 Posting Whiz

You've floated .maincontrols, so it's out of the document flow.

That's only way to let the other div fill remaining width.

When it comes to the link you provided:
Doug Neiner's method is not a solution, I really need entire DIV to spread that far, not just it's gradient or background. It needs to "physically" not just visually reach that far.

Nicolas Gallagher's method is not a solution, just like above, you just apply gradient over parent, and then put children within. The only reason why they're in middle is due to padding, also colors are not dictated by children (if you look into inspector, you can see some children reach couple pixels beyond "their color").

"Using Tables" could work, if it weren't for fact that I have super-long span in my code. And if you apply table make-up to it combined with:

    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;

Item spreads out entirely (one huge long line that cannot be stopped). As seen here. If I use this, I cannot limit div.summary anyhow. I mentioned it in first post. Before posting this topic, I tried fighting with it, but it didn't work.

"One True Layout Method" uses fixed padding (rule says: padding: 30px 3.15% 0;). So it doesn't "spread" 100%, it just spreads enough to fill the space.

"Flexbox" seemed to eliminate all except one bug, to be seen here div.listmail div.mail div.maincontrols's is set to width: 1000px; yet it behaves like percent (the …

Aeonix 71 Posting Whiz

Literally LOL.

When I said: "I'd like the red portition to spread over the div, and fill entire height", I didn't mean it literally. I meant that I really need this div to take entire height. Except the div that needs to "spread" is div.listmail div.mail div.maincontrols not div.listmail.

I meant that by means necessary, I need div.maincontrols to fill entire height automatically (regardless of padding and height of other items) and align items vertically in middle automatically (once again, regardless of height, own padding and height and padding of other items).

It's not about it being red. It's about being able to manage DIV's height and content.

(I refreshed "Articles I'm Watching" 51 seconds after you answered)

Aeonix 71 Posting Whiz

Thumbs up next to reputation points shows only for first post. Has no bonding on negative or positive points. It's one who created the topic. Look at this posts' indicator. No thumbs up.

Also, it's profile also says 7 in reputation points.

rproffitt commented: Should be interesting to see what happens next. +0
Aeonix 71 Posting Whiz

I would stream characters one by one into an array, and if letter appears, add 1 next to it, so that array ends up (for potato):

"p" => 1,
"o" => 2,
"t" => 1,
"a" => 1,
"t" => 1

Then look up if there are any values > 1. If true, remove the word. If false, uh, process it.

Alternatively, this link could be interesting:
http://stackoverflow.com/a/1212118

This one probably helps you regex out repeated words, I'm pretty sure if you nibble long enough, you'll find regex for repeating letters. Match, if true, remove the word, if false, once again, JUST DO IT!!

Aeonix 71 Posting Whiz

So I and rproffitt both downvoted a bot.
I went over to it's profile, we have apparently total power of 7 in reputation decrease. I expected -7 in reputation, instead it has 7 reputation. That minus is pretty important.
It also says Lam Bang (7) instead of Lam Bang (-7). It feels like people downvoting trolls are actually endorsing them.

Also, when two people downvote a response, how does it become "Featured Answer"?!

Dani commented: Testing rep :) +0
Aeonix 71 Posting Whiz

Gribouillis, it's actually a valid link to Google Drive. It contains two .docx items. One is rating card (how much points you get for what), and the exercise itself.

Edit: Nevermind, it appears to be Malaysian bot who got hold of Google Drive link.

Aeonix 71 Posting Whiz

https://jsfiddle.net/u6n3dq9m/4/

I never actually realized that they weren't finished :D, code worked flawlessly, it seemed I missed / in many. I can't update my post, so above is the link with fixed endings. After fixing, nothing changed in appearance. But yea, unfinished endings are not best.

I have seen the red flags, but after 5 minutes I still didn't see what was causing the error. So I thought jsfiddle was just trolling me. Good eye, sport!

Aeonix 71 Posting Whiz

Time for a real challenge.

https://jsfiddle.net/u6n3dq9m/4/

Is what I've got. I'd like the red portition to spread over the div, and fill entire height, while

You can't/Tried but failed:

  • Use overflow: hidden, because it doesn't work (I thought it will render some overflow and stuff, I don't know).
  • Use position: absolute/relative unless you know how to make DIVs adhere to rules already in CSS (mentioned widths). So, that red DIV is still "350px" and the green DIV is filling. (I tried position absolute and relative, but the green width spread beneath the red div).
  • Use display: flex; because it makes text-overflow: ellipsis; not render properly. Further read. Gotta have 'em! Otherwise I'm stuck in a very unnicely cut overflow: none;
  • Use display: table; because it makes overflow: hidden, white-space: nowrap and text-overflow: ellipsis not work. Elements span out of parent too and are uncontainable.

You technically can use above things or try. If you know how to bypass the reason why they weren't working in the first place.
To makes matters worse, center vertical align needs to be automatic, not by custom value (e.g. line-height or padding). Because each of the items within will be either bigger or smaller than the rest, they all need to align to center in their own way independantly of their neighbours.

I tried for some time, couple solutions, none work. I'm out of ideas. I call thee, DaniWeb overlords. :D

Aeonix 71 Posting Whiz

On top of it, when I log out and click "Log In" button, I get automatically logged in.
Maybe other people see convinience in being able to relogin, but I see security threat.

When I logout I expect nobody being able to login after me, without my password. Instead they just can click on "Log In" button. Not cool. :(

Oh and trying to put in email, fails, "can't login", and I get offer to switch to DaniWeb username input.

Aeonix 71 Posting Whiz

Nope.

"Aeonix" doesn't contain a @, please insert @.

Or something equivalent. I really need to input wrong mail for it to let me use my name.

Aeonix 71 Posting Whiz

Why are you unable to log in with your email address and password?

Because "it doesn't exist". I need input "aaa@aaa.com" and password "aaa", then it asks me "Would you like to login using DaniWeb creds", I approve and then username "Aeonix" and then password "password123". My email doesn't exist, and so far I recall I don't remember using email to login.

The fact that it asks you to use your DaniWeb credentials is actually just a UI/UX trick that does nothing except for replace the word email with the word username.

I'll let you know, if I can login using regular name instead of email.

Aeonix 71 Posting Whiz

Yep, tested, seems to work :)

Aeonix 71 Posting Whiz

You fixed the counter, but the issue is still here.

https://www.daniweb.com/programming/software-development/threads/506741/object-oriented-programming

This is where I posted a post, which I thought as off-topic, and decided to delete it, and the situation repeats, it says "0 replies" in "Articles I'm Watching", but has actually 6 replies.

Edit: And now this thread has "0 replies" and "33 views" and "Be First To Reply".

Aeonix 71 Posting Whiz

To start things off, it was implemented without my knowing, not that you need to report me to it, it's your site, not mine, but it would be nice if you gave some beforehand warning. And if you did, I didn't notice, so it's my fault then, but then again, nobody's at fault.

I couldn't login at all with my data, remained confused (banned?). You can see inactivity for some time in my profile. It told me to create an account, but each time it timed me out. I couldn't register, couldn't login, could eventually try crying in the corner.

Recently I revisted in hope it changed, and it kinda did, it still tries to force me into Dazah, but afterwards asks about DaniWeb login, which is fair enough. So yea, I'm not seeing any positive stuff from Dazah. At all. I understand that it helps letting some fresh air into DaniWeb, but for me personally, that wasn't fun.

It has been pain at start, blocked me in middle-life and still adds new layer of unneccessary delay in it's current life. But if it helps DaniWeb. Well, prices need to be paid.

Generally not happy about it. Definitely not a bad idea, but I think developers have yet to call it "Dazah Beta". Not that I know anything about programming.

(PS: What is a "We give your users the ability to discover and connect through a patent-pending, robust matching algorithm.", how are we being matched?)

Aeonix 71 Posting Whiz

Nice necropost there Mrigank.

But if it's already up to see the sun.
We use use int before main() {} because program that malfunctions returns error code other than 0. A program that is successful (a.k.a. ended it's job), return 0;, rather than returning string that is overly compilcated, or boolean that is extremely limited, we use integers to indicate if the job succeded. Errors are then cryptic enough to not be read by user, cryptic enough to be able to be fixed only by developers.
That's my 5 cents.

Aeonix 71 Posting Whiz

No, no, no.

You said:

[Still working on this,] sorry.

I responded:

You shouldn't be [, nobody's complaining, bugs happen to everyone]

I meant you shouldn't be or feel sorry for bugs. They happen to everyone.

Seems like double encoding is gone too.

Aeonix 71 Posting Whiz

You shouldn't be, nobody's complaining, bugs happen to everyone, (and especially to me).

Aeonix 71 Posting Whiz

Fiddling with your code, "display: flex;" seems to be what breaks dots. Try other values?`

YEA!!

I just applied float and overflow: hidden fill technique. And dots appeared instantly! Woohoo! Thanks.

rproffitt commented: Be well. +11
Aeonix 71 Posting Whiz

You know, the PMs were themed behind this exact reason. You misunderstanding me. You told me you'd respect it, seems you missed the point.

(this starts turning in a drama)

Aeonix 71 Posting Whiz

I deleted my recently made post in:
https://www.daniweb.com/hardware-and-software/information-security/threads/506745/why-does-google-offer-free-fonts-to-use-online
Now when I'm in "Articles I'm Watching", it says about it: "0 votes; 0 replies; 25 views", despite thread having 7 replies.

Edit 1: Also title got encoded and not decoded: After deleting of a recent post, "Articles I'm Watching" shows 0 replies.

Edit 2: Just when someone responded to this same thread, it says that there is 1 reply now, even though it's 8th.

Aeonix 71 Posting Whiz

Exactly not in this situation.

If I set overflow: none; on itself, it doesn't seem to be affected.

The only way to handle overflow of this item, in this situation is to put overflow: none; on parent's parent. But then text-overflow: ellipsis; (either on parent's parent, parent or element iself) doesn't work. It doesn't put triple dot at the end.

Oh and I know how properties and functions of overflow, thanks :)

(it's weird how this entire thread devolves to "i miss three dots at the end")

Aeonix 71 Posting Whiz

I rechecked and it noted support for Firefox versions 49 to 53. My concern is that only iE11 was listed and too many use IE and lower versions so this is going to be hit and miss.

Are we looking at the same document? I see two sections, one has "Not supported" across every and all versions (while it does support), and other has "Supported" across every and all versions. Not only 49 to 53.

If "Firefox" is marked as one that isn't supported, while it does support it. And Opera and Chrome don't require prefix like CanIUse claims. I wouldn't be surprized that IE10+ is also supported.

What I don't understand is you solved this, (read your code.)

It's not quite what I wanted. Since Firefox, Chrome and Opera work on this: https://jsfiddle.net/tt9psxz3/1/
I really wanted it to work on this: https://jsfiddle.net/n0260s1L/3/
You know the wrap and triple dot at the end.

Aeonix 71 Posting Whiz

Did he really just link to the assignment and be like "Do this", seriously?!
Not happening dude, you have to cry nicely. Take a look at my questions for example:

  • List your attempts
  • Format your post well
  • Show them code in readible form
  • Tell 'em what you tried
  • Tell 'em what you're trying to achieve
  • Beg for DaniWeb overlords
Aeonix 71 Posting Whiz

Can I Use also claims that Firefox doesn't support it, but it does: https://jsfiddle.net/tt9psxz3/1/
And since Dani says it, it's pretty believable that it must be widely supported: https://www.daniweb.com/programming/web-development/threads/506676/wrap-text-and-end-it-with#post2212071
I believe that there must be a mistake on CanIUse, since it does work and doesn't require prefix for Opera and Chrome as CanIUse states.

On top of it, that's just part of the problem, it should still limit content of the item regardless whether it's direct cut-off or ending on "...". And it doesn't do that, which I still don't understand why.

Aeonix 71 Posting Whiz

https://jsfiddle.net/n0260s1L/3/

Is what I have. Text of div.summary goes outside of it's planned content. Even when told not to. The only solution to this is overflow: none; in "super-parent" div.mail. But it ignores: text-overflow: ellipsis;.

How can I limit content of this div (div.summary) and have text-overflow: ellipsis working at the same time, by changing CSS?

Aeonix 71 Posting Whiz

Well, that's not what I meant. Okay, another way: "I'm talking more about the darkest real possibilities that Google would try to use, without possible knowing of outside world.".

What realistic crazyness could they obtain legally. I know they can run all types of code. But that's obvious and they wouldn't do that.

On top of it, Google embedding viruses to obtain control of computers it's rather unrealistic. Google wouldn't go that far. I have something more riskless in mind. Something that could be crafted from data they legally obtain.

For example clicking on three videos is data that they legally obtain. The darkest real possibility is that they create A.I. which simulates your psychology (they already have computers detecting human mood, age and gender). It is realistic, and nobody can really point out on it, because it's legal, they don't inject or break anything, and they still provide you with videos that you clicked on.

I'm seeking more for things like this. Something weird that they could do with this data, without fighting the law.

Once again, it's not about "Google so bad", it's more like "What is the risk that I have to deal with, when you put your tinfoil hat on?".
I won't upload personal pictures to Google because NSA. You can do a lot of people's images, documents and voice-recordings.
What could you do with "requesting a font" that isn't infected or anything? Is there some analytical potential? I'd rather download fonts than …

Aeonix 71 Posting Whiz

Consider also that you could serve Google Fonts from your web server, just download them and set the paths in the CSS file.

It's not like I'm afraid of Google. If they did things really wrong, they would lose trust of millions of developers. I'm talking more about the darkest real possibilities.

Aeonix 71 Posting Whiz

I've been Googling this one, and I've come across solutions, but they don't seem to work for me. The code is as follows:

<?php

$name1 = "Jack Random";    // true
$name2 = "JackRandom";     // true
$name3 = "Jack;Random";    // false
$name4 = "JackRand;om";    // false
// Accept only A-Z, a-z, 0-9 and space.

if (!preg_match("/^[0-9a-zA-Z ]/", $name1)) echo "Nope, not good";
echo "<br />";
if (!preg_match("/^[0-9a-zA-Z ]/", $name2)) echo "Nope, not good";
echo "<br />";
if (!preg_match("/^[0-9a-zA-Z ]/", $name3)) echo "Nope, not good";
echo "<br />";
if (!preg_match("/^[0-9a-zA-Z ]/", $name4)) echo "Nope, not good";

// Tried: /^[0-9a-zA-Z ]/
// Tried: [^a-zA-Z0-9\s]
// Tried: /\\w|\\s+/
// Tried: ^[A-Za-z0-9 ]+$ (error, missing delimiter)

?>

First and second should return true, and third and fourth should return false.
The thing is that to every provided RegEx, they respond in the same way.
They're all error, or none of them.
I could've always put ! to flip them to correct working, but they don't differentiate.
The one that I thought would work is: /^[0-9a-zA-Z ]/, but nah. Why would it
be easy?

Aeonix 71 Posting Whiz

<hat type="tin-foil" mode="on">

What does Google have from serving us with Google Fonts?

Typical Google could start sending up custom JavaScript from JavaScript repository. But what about fonts? What does Google get from it?
You can't tell me they just have well-doing spree and are sharing to help. Corporations are always seeing buck in everything.
Is it about marketing and brand recognition?

Is there something that we are sending from our websites that we shouldn't? Is there something I should know about?

On YouTube, "just clicks" turns to "psychological pattern". Does serving Google AJAX/Fonts have any greater stuff we should know about?

Aeonix 71 Posting Whiz

Call me an antagonist. But it's rather suspicious that 6 absolutely new accounts respond to this thread after one another. As these new users have between 1 to 5 posts and aren't really popular.

Aeonix 71 Posting Whiz

In such case, what is the potential change (or vague expectations) when it comes to latency. If they used those mentioned billions and actually did improve it?

Aeonix 71 Posting Whiz

While you provided good insight into situation, it's not quite what I hoped to receive.

Let's say that package from Netherlands to West U.S. takes 160ms, is there a chance in the future that the latency will go down? We're assuming latest of hardware, and no limits when it comes to money.

I'm talking about networking technologies development in very near future (talking about 5 years - 20 years), that could bring this thing down. Coax got upgraded to fibre to bring up higher bandwidth, that is a very good way to increase bandwidth and maybe reliability. It got implemented and people can enjoy it if they need it. Are there any "very good ways" that are expected in future that would bring down the latency? People knew about fibre before it got implemented, it was in plans, it took time to do, but now it's here. Is there something that we know about "latest latency breakthrough", if we even have any?

Rather than stamping out milliseconds by perfect hardware, I'm more wondering about technologies that could easily dump 20% of latency because of "The Greatest Revolution Ever" etc. etc.

Aeonix 71 Posting Whiz

Each years our computers are getting faster, games more demanding, which fuels better computers.
We develop more memory in lesser spaces.
We develop processors that calculate more than super-computers 20 years back.
We had 56k modems, 1M, 2M, 5M networking, just recently there is possibility to get 1.5G at your doorstep, with record of 70G+

Everything moves on-ward, but what about latency? The speed at which TCP/UDP package can be delivered?

Is that improved since "back then"? I can't see anything on the internet, so I'm wondering, since you guys have been here longer than I am.
If not or so, are there any hopes or idea of improvement?

"We know" how to improve processors.
"We know" how to improve memory.
"We know" how to increase networking bandwidth.
Do we know how to decrease latency? Do we care about enough it?

Aeonix 71 Posting Whiz

I give up.

Problem is gone, let's have some beer.

Aeonix 71 Posting Whiz

Ooookay. Show me a website that has tens thousand users on each of 10,000 servers like in your hypothetical that releases the website without doing denial of service tests on their own webite

I think you misunderstood me. 10.000 users who legimiately use website and send real queries, versus self-induced DoS attack are not the same. That's what I meant, first sends normal data, second is just garbage spam (assuming there's no upper-layer leak). One is interpreted by written script that I've written, second is just spam, that has no actual direction (maybe it has, but it's not regular input).

[snip]

Well. That's not what I meant. I meant stress induced by real users, not the illegitimate ones. You can't really prepare for DoS attack, if someone gets your IP, you're pretty much done for, unless someone like Cloud Flare (and couple others) have some ways to "mitigate" them. The question is not about "how can I find where my website has the hardest time" it's about "how can I find where my website will start spiking and bottlenecking itself by use of legitimate users". It's more of "I have finished great website/program, how can I know it works smoothly with 10.000 people?".

Aeonix 71 Posting Whiz

Write some scripts that hammer the site and all the underlying services involved with work to do. At some point there will be something in the chain that can't keep up.

Well that's a question. If there are any recommendations or thoughts or something.

A denial of service attack on your own site.

This is illegitimate mass of data. Nothing what users will return.

Aeonix 71 Posting Whiz

I don't know your design or why this is a concern.

Just wondering.

If I look at prior questions like https://www.daniweb.com/programming/web-development/threads/506651/how-to-make-this-script-animation-jitter-less that is client side and a server has nothing to do with the issue you asked about there.

These two are totally unrelated.

About 5 years ago a run of the mill web server could easily hit 10K requests a second. If your site is lucky to get 10K requests why would a 1 second delay matter?

It's not about seconds delay it's about checking out where are real choking points of performance in real-life scenario's. Even if it's 1 second delay. What about millions of active users?

It's not about real project. More about me being interested. The question is rather simple, how do you know performance of your server doesn't suck, if you haven't tried masses requesting many things at the same time.. Your script may handle 10 users easily, but with million users requesting the same, server might choke down, think about storage bottlenecks. Sure processor, memory and network will handle it, but you may find out that storage may delay response in long-run. I'd like to know if there's a realistic way to predict that, or stress it.

Aeonix 71 Posting Whiz

Let's assume couple things.

I created a nice website based on compiled program language (Node.js, ASP, Java, C#, whatever). It works nicely. But I'd like to get an estimate on how much hardware I'd need. So I could run 1 hosting, and it would result in "this" amount of impact on servers (memory, processor cycles, networking etc.). But that's 1 person with 1 hired server. I'd like to test how would it be, if 10.000 people were on each of 10.000 servers.

Any way to find that out, before releasing it?

Primarily, I'd like to check if there are no "bumps" in performance. For example 1 user requesting a hard sequence won't be noticable, maybe a small bump in computer's graphs. But if 10.000 people request same resource, seemingly "nothing-to-see-here" imperfection, will turn into a nightmare.

Like I said, how can I profile what could possibly happen if 10.000 people, got on 10.000 different servers.

All hypothetical, we all know I can barely write regular JavaScript and C# xD

Aeonix 71 Posting Whiz

What kind of problem do you mean?

Well "float: left" is pseudo-default. But "float: right" suddenly solves marginal errors, why?

Aeonix 71 Posting Whiz

Do you really have/want to support IE9 and below?

Not really. But I also don't want to spam flexbox's left and right. And the caniuse also says that there are more people using IE 9 than IE 10. If I already drop IE 9, I might as well drop IE 10, which makes it look bad. Just supporting 11, 12, 13 and Edge, (grunt).

I guess I'll have to :(, oh well, thanks for your help.

Aeonix 71 Posting Whiz

No............. I'll have to change lay-out of "the thing".

How about another way, is it possible to bring two items on the left, and then have span.middle "fill" the remaining space on right?

Aeonix 71 Posting Whiz

I have no idea why default float: left; would create a problem and float: right; wouldn't. Could you explain?

because you set fixed dimensions of 80px on them anyways so there's no need for using inline-block.

But only inline elements don't react with set height and width.

Aeonix 71 Posting Whiz

I have two items that look like this

span.left {
    float: left;
    display: inline-block;
    /* Take space neccessary */
}

span.middle {
    /* Take free space only, do not push unless allowed */
    /* Contains couple lines of text */
    text-overflow: ellipsis;
    overflow-x: hidden;
    white-space: nowrap;
}

span.right {
    /* Take space neccessary */
    float: right;
    display: inline-block;
}

Unlike previous request. This one can't use flexbox and can't be reliant on JavaScript.

span.left and span.right are both elements that are allowed to widen up as much as they want while.
span.middle has to shrink if forced and grow if it's allowed (by it's remaining width).

I tried to the typical float: X and width: 100%; trick, but span.right didn't make it to the first line and ended up being below span.middle on the right side.

Oh, and I forgot, span.left and span.right can be of flexible length.

Aeonix 71 Posting Whiz

https://jsfiddle.net/rw2894fe/2/

I don't need to explain the issue, it's visible the second you look at it.
Red anchors seem to have "unexplained" padding on bottom and right side.
Removing it with "padding: 0; margin: 0;" doesn't affect it.

Could someone tell me how to remove that unwanted padding and make it look nicely/even? (so that people with OCD won't freak out).

P.S.: Even more visible if you remove my padding from the game: https://jsfiddle.net/rw2894fe/4/
P.S. 2: Nevermind, the solution that I found (adding font-size: 0; to parent and font-size: X; to child) removes all padding, including manual. Back to version 4.

Aeonix 71 Posting Whiz

Yea, that will work great too. Thanks.

I'm having real difficulty understanding what you mean and linking the fiddle with what you want to do.

Yea I don't know why. I don't speak Russian, but you're not dumb. I just have a hard time explaining it, sorry, I'm not native to English.

Aeonix 71 Posting Whiz

https://jsfiddle.net/c9jmjcy0/3/

The reason that it doesn't work is because for some reason <a> denies wrapping <div>. Probably specification. The only solution is to wrap it around other item.
Do we have any other item that would say "it's a link/dropdown". There's also <button>. But it doesn't wrap it either, it just creates button with these values.

If I wrap it in another div, then I'll start having spaghetti HTML, which I try to avoid pretty hard.

Is there no other way to make this CSS work (when it comes to understood functionality) without adding wrappers?

Aeonix 71 Posting Whiz

Removed two last lines. Apparently there was something to it that made me redirect trillion times. As soon as I removed it, everything from http://www. and http:// got redirected to full https://www..

-

If you're from search engine, this is what you seek for:
RewriteEngine on
RewriteCond %{HTTP_HOST} ^domain.com [NC]
RewriteRule ^(.*)$ https://www.domain.com/$1 [L,R=301]

I don't know what L, is, or what [NC] is, but it works and hasn't exploded.

Aeonix 71 Posting Whiz

Imagine a mailbox. You're about to write to a friend. From staff perspective, someone wants to email Dani, her mail is dani@daniweb.com, but has her in contacts list. You type in "Da", and little tool-tip informs you that it knows this mail, tooltip shows her full name "Dani" and her email "dani@daniweb.com". You have two options, you click on a link within tool-tip to select her or you write out her email entirely. Now, if you choose to type out her name, instead of flat out text dani@daniweb.com, jQuery/JavaScript changes it to nicely formatted <span>Dani</span> (where I will add dropdown lateron). If you choose to use help of tool-tip <span>Dani</span> will immediately pop-up without you even typing full "Dani".

I have prepared the basics, the list, the span, the dropdown and the textfield: https://jsfiddle.net/uf6t5voL/

I don't know how to manage automatic recognition, fusing <input> and <span> in the same field, and tool-tipping while typing.
Could someone help me finish it up? Links, suggestions, shows?

(I hope you don't mind me using you as an example Dani, nothing personal or offensive meant)