56

I thought it would be nice to have an advanced search that exposed some of the search functionality that's hidden away on this page.

I think it would make it simpler for users, especially those that aren't aware of it, to search for questions they are interested in if there was a user interface to do it from.

Here's a peek of what I mocked up:

Advanced Search

I've created a working example that exposes some of the functionality available in the search box by building up a search URL. The initial criteria on the demo, shows:

  • Questions created this month
  • With a positive score
  • In your tags
  • With 0 answers

Stack Overflow Advanced Search - Fiddle

The fiddled version searches Stack Overflow and launches results in a new tab.

Stack Snippet Version - Meta.SE only (Sandboxed)

The snippet version pushes the results in to an iframe as it prevents launching new windows / redirecting from the sand-boxed environment, so it only searches this meta site. I can't bypass this as far as I'm aware.

$('.btnUpdate').click(

  function() {
    var site = document.getElementById('site').value;
    var link = 'http://' + site + '/search?q=';

    if (document.getElementById('tags').value.length > 0) {
      link += document.getElementById('tags').value;
    }

    link = appendLink(link, 'answers', 'answers:');
    link = appendLink(link, 'score', 'score:');
    link = appendLink(link, 'views', 'views:');
    link = appendLink(link, 'created', 'created:');
    link = appendLink(link, 'lastactive', 'lastactive:');
    link = appendLink(link, 'title', 'title:');
    link = appendLink(link, 'body', 'body:');
    link = appendLink(link, 'user', 'user:');
    link = appendLink(link, 'infavorites', 'infavorites:');
    link = appendLink(link, 'intags', 'intags:');
    link = appendLinkWithBool(link, 'hasaccepted', 'hasaccepted:');
    link = appendLinkWithBool(link, 'hascode', 'hascode:');
    link = appendLinkWithBool(link, 'closed', 'closed:');
    link = appendLinkWithBool(link, 'duplicate', 'duplicate:');
    link = appendLinkWithBool(link, 'locked', 'locked:');

    event.preventDefault();
    event.stopPropagation();
    //window.open(link, '_blank');

    var frame = document.getElementById('myFrame');
    frame.src = link;
  });

function appendLink(link, ctrl, param) {
  if (document.getElementById(ctrl).value.length > 0) {
    return link + '+' + param +
      document.getElementById(ctrl).value;
  }
  return link;
}

function appendLinkWithBool(link, ctrl, param) {
  if (document.getElementById(ctrl).value !== 'exclude') {
    return link + '+' + param +
      document.getElementById(ctrl).value;
  }
  return link;
}
body,
html {
  font-family: Verdana;
  font-size: 10pt;
  height: 100%;
}
span,
input {
  display: block;
}
.split {
  width: 45%;
  display: inline-block;
  vertical-align: top;
}

.split-r {
  width: 52%;
  display: inline-block;
  vertical-align: top;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="split">
  <div>
    <span>Search Site: (without http://) <sub>(limited to meta with sand-box)</sub></span>
    <input id='site' type='text' value='meta.stackoverflow.com' disabled />
  </div>
  <div class="split">
    <h4>Tags</h4>
    <ul>
      <li>Single: [tag-1]</li>
      <li>Multiple AND: [tag-1] and [tag-2]</li>
      <li>Multiple OR: [tag-1] or [tag-2]</li>
    </ul>
    <h4>User Operators</h4>
    <ul>
      <li>User: mine, me, or a user id</li>
      <li>In Favorites: mine or a user id</li>
      <li>In Tags: mine</li>
    </ul>
  </div>
  <div class="split">
    <h4>Numeric</h4>
    <ul>
      <li>Single value: 50</li>
      <li>Range: 50..75</li>
    </ul>
    <h4>Dates</h4>
    <ul>
      <li>Year: 2014</li>
      <li>Year and Month: 2014-12</li>
      <li>Full: 2014-12-31</li>
    </ul>
  </div>


  <div class="split">
    <span>Tags: </span>
    <input id='tags' type='text' value='' />
    <span>Title: </span>
    <input id='title' type='text' />
    <span>Body: </span>
    <input id='body' type='text' />
    <span>Answers: </span>
    <input id='answers' type='text' value='0' />
    <span>Score: </span>
    <input id='score' type='text' value='1' />
    <span>Views: </span>
    <input id='views' type='text' value='' />
    <span>Created:</span>
    <input id='created' type='text' value='2014-09' />
    <span>Last Active:</span>
    <input id='lastactive' type='text' value='' />
  </div>
  <div class="split">
    <span>User: </span>
    <input id='user' type='text' value='' />
    <span>In Favourites: </span>
    <input id='infavorites' type='text' value='' />
    <span>In Tags: </span>
    <input id='intags' type='text' value='mine' />
    <span>Has Accepted Answer:</span>
    <select id='hasaccepted'>
      <option value='exclude'></option>
      <option value='true'>true</option>
      <option value='false'>false</option>
    </select>
    <span>Has Code:</span>
    <select id='hascode'>
      <option value='exclude'></option>
      <option value='true'>true</option>
      <option value='false'>false</option>
    </select>
    <span>Closed:</span>
    <select id='closed'>
      <option value='exclude'></option>
      <option value='true'>true</option>
      <option value='false'>false</option>
    </select>
    <span>Duplicate:</span>
    <select id='duplicate'>
      <option value='exclude'></option>
      <option value='true'>true</option>
      <option value='false'>false</option>
    </select>
    <span>Locked:</span>
    <select id='locked'>
      <option value='exclude'></option>
      <option value='true'>true</option>
      <option value='false'>false</option>
    </select>
    <input type='button' value='Show me the Posts' class='btnUpdate' />
  </div>
</div>
<div class="split-r" style="height: 100%;">
  <iframe id="myFrame" src="http://meta.stackoverflow.com" sandbox="allow-same-origin" style="width: 100%; height: 100%;">
  </iframe>
</div>

Stack Exchange Version:

I figured this functionality would work across the Stack Exchange network, so I've created a version of this demo that allows users to enter a URL. I was debating whether to post on meta.stackexchange, but figured I'd just update the demo on here first and see if migration was suggested:

Stack Exchange Demo

The only addition was the inclusion of a "Search Site" input control, the rest is unchanged:

New search

Feel free to modify and improve the samples if you so please.

PS: It's only been tested very lightly!

October 2016 Bump / Update

So the advanced search is still pretty much hidden functionality apart from those users in the know.

For example, it's not straight forward to get the advanced search tips as there's not direct link to the Search page. You can do a search and you get the advanced search tips, which are collapsed under a link. Here's another mockup with how it could look:

Enter image description here

20
  • 19
    -1 for not making it work in a stack snippet here rather than jsfiddle. Commented Sep 3, 2014 at 15:48
  • 5
    @MartijnPieters i tried but it prevented launching a new window :-(
    – Tanner
    Commented Sep 3, 2014 at 15:49
  • Your UI doesn't cover the option to use ranges; score:50..75 for example. Commented Sep 3, 2014 at 15:51
  • 19
    Wait... did you just ask for a search that is simple and advanced? ;)
    – Andrew Barber Mod
    Commented Sep 3, 2014 at 15:53
  • 2
    @AndrewBarber yeah, just like me!
    – Tanner
    Commented Sep 3, 2014 at 15:54
  • 32
    This is how we keep out the non-programmers.
    – Servy
    Commented Sep 3, 2014 at 15:55
  • @Servy Make it a privilege to access along with the loss of ads on questions: 200 rep to use. :) (This suggestion was made in jest, before I get flamed for it. I would enjoy advanced search, but don't find the current search methods that bad myself)
    – Kendra
    Commented Sep 3, 2014 at 16:06
  • 3
    @Tanner: of course, I could go on with pointing out what is missing; what about all the boolean operators (accepted (answer and question variants), lock status, wiki status, etc), the user operators (user:..., infavorites, intags:mine), the title and body operators, etc.? That's the thing with the advanced search, there is a lot there to cover. Commented Sep 3, 2014 at 16:16
  • 2
    The "Advanced Search Tips" expandable on the search results page and the link to the help page it contains could be more prominent, but I think programmers would prefer to handle the search syntax on their own rather than using a lot of text fields -- if you could even make a reasonable UI that covered all or most of the options. Commented Sep 4, 2014 at 0:47
  • @MartijnPieters I've added functionality for boolean operators, user operators, as well as title and body searching, which makes it a slightly more useful demo
    – Tanner
    Commented Sep 4, 2014 at 14:44
  • There's already the SE Data Explorer, but you need to know SQL.
    – idmean
    Commented Sep 4, 2014 at 15:02
  • 1
    @wumm Thanks, I'm aware of that. This would be a simpler version of what you can do there.
    – Tanner
    Commented Sep 4, 2014 at 15:03
  • @MartijnPieters stack snippet added, but limited to meta because of the sandboxed environment.
    – Tanner
    Commented Sep 25, 2014 at 15:18
  • Any advanced search functionality should search the entire Stack Exchange network by default, not simply Stack Overflow.
    – chb
    Commented Oct 31, 2017 at 7:45

0

You must log in to answer this question.

Browse other questions tagged .