I watched many web tutorials for seo but I never found how and why some bigger websites have this when they are searched…
I don’t know where to ask this beside quora and yahoo, but no one is answering there… Image
when your website become so popular and has lots of active users and content
the result is more indexed pages by google then
first google show the most popular of your page as yo can see in your image, some how like a table with 2 column and 3 row
and after that because you have lots of data on your site like
w3schools.com or stackoverflow.com it brings a customized search box under the title of your site, so the result of the search will be limited just to that website
Question posted in 
2
Answers
when your website become so popular and has lots of active users and content
the result is more indexed pages by google then
first google show the most popular of your page as yo can see in your image, some how like a table with 2 column and 3 row
and after that because you have lots of data on your site like
w3schools.com or stackoverflow.com it brings a customized search box under the title of your site, so the result of the search will be limited just to that website
Everything that you need to know is here.
https://moz.com/blog/sitelinks-search-box
This does not appear just because you have a good website as the previous answer states.
This is another rich snippet. You have to implement it to your site using schema.org and your site has to qualify to get it.
It’s not easy to get that search bar but I have implemented it to a couple of sites.
Read everything on the above link that i gave you and you will understand.
Regards