StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<h1>HTML</h1> <pre><code><form action=""><input type="text" name="word" id="word"></form> <div id="auto"></div> </code></pre> <h1>JS</h1> <pre><code>$(function(){ $('#word').keyup(function(e){ var input = $(this).val(); $.ajax({ type: "get", url: "autocomplete.php", data: {word: input}, async: true, success: function(data){ var outWords = $.parseJSON(data); $('#auto').html(''); for(x = 0; x < outWords.length; x++){ $('#auto').prepend('<div>'+outWords[x]+'</div>'); //Fills the #auto div with the options } } }) }) }); </code></pre> <p>Don't forget to link <code>jQuery</code>...</p> <pre><code><script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> </code></pre> <h2>N.B.</h2> <p>You would need to do something like add an <code>onclick</code> event to the child <code>div</code>s of <code>#auto</code> to replace the contents of <code>#word</code> (the input field).</p> <h1>PHP</h1> <pre><code>$array = array('microsoft','micromax', 'miniclip','michael jackson','million','milky way'); $input = urldecode($_GET['word']); //Get input word/phrase (decode in case of spaces etc.) $length = strlen($input); //Get length of input word // $min = $length - 1; //Length of word - 1 // $max = $length + 1; //Length of word + 1 $returned = preg_grep('/^(['.$input.']{'.$length.'}.*)$/i', $array); //Find matches in $array and return as array $returned = array_values($returned); //Re-index from 0 echo json_encode($returned); //Returm json string to ajax call </code></pre> <h2>Regex</h2> <pre><code>/^([$input]{$length}.*)$/i </code></pre> <ol> <li><code>/</code> => Starting delimter</li> <li><code>^</code> => Start of string</li> <li><code>(</code> => Start a capture group</li> <li><code>[</code> => Start a character class</li> <li><code>$input</code> => Add the input word to the character class</li> <li><code>]</code> => End the character class (4)</li> <li><code>{$length}</code> => Set length of string to match character class against (length of input word)</li> <li><code>.*</code> => Match any <strong>following</strong> characters 0 or more times</li> <li><code>)</code> => End capture group (3)</li> <li><code>$</code> => Match end of string</li> <li><code>/</code> => Ending delimeter</li> <li><code>i</code> => Modifier for case insensitivity</li> </ol> <h2>Min/Max</h2> <p>I have included the commented <code>$min</code> and <code>$max</code> variables... An added feature that I thought you <em>might</em> like... You would implement them by changing:</p> <pre><code>{'.$length.'} <-- Change this {'.$min.','.$max.'} <--To that {'.$length.','.$max.'} <-- Or that (or another combination) </code></pre> <h3>Example</h3> <p>An example might best show how this works...</p> <p>Suppose an auto correct array of:</p> <pre><code>$array = array('loser', 'loses', 'losing'); </code></pre> <p>and an input of:</p> <pre><code>lose </code></pre> <p>Currently (<code>{'.$length.'}</code>) the code will return:</p> <pre><code>loser loses </code></pre> <p>But if you change it to <code>{'.$min.','.$max.'}</code> (and uncomment <code>$min</code> / <code>$max</code>); it will return:</p> <pre><code>losing loser loses </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload