[aur-dev] Remove package search auto-complete

[Joris Steyn]

If I'm reading this right we've reached a consensus :). I do appreciate the
arguments against using javascript.

In the light of moving forwarding fixing the issues, this thread revealed
two
usability issues:

* you have to press enter twice to get the search submitted
* if you select a specific package from the list, you still end up on the
  search results page

The changes proposed by Daniel Landau fix both issues, but do not allow
using the
keyboard to select a package from the list. Attached patch is based on those
changes and cover the following use cases:

* a user enters a search term and presses enter -> search results page
* a user enters a search term and clicks on a suggestion -> package page
* a user enters a search term and selects a suggestion using keyboard ->
package page


On Wed, Jan 1, 2014 at 1:16 AM, Callan <callan at zoocar.org> wrote:

> On 01/01/2014 12:53 AM, Lukas Fleischer wrote:
>
>> Didn't look at the code in detail but I think that this is the best idea
>> that has been presented here so far (in terms of usability). From the
>> beginning, I have been strongly against JavaScript in the AUR but as
>> long as JavaScript features are helpful and don't hurt any users with
>> JavaScript disabled, I see no point in not adding them. The typeahead
>> feature helps with:
>>
>> * Entering long package names.
>> * Searching for packages when you can only remember parts of the name.
>> * Finding packages with a name that is part of several other packages.
>>
>> It saves at least one "hand from keyboard to mouse" movement, a point
>> operation and a click (and in the last case, several point operations
>> and clicks).
>>
>> What are the real arguments against this feature (not against the
>> implementation)?
>>
>
> I'm swayed. I don't see any problems with the feature when it's actually
> working properly. I'm still uncomfortable with the level of dependencies
> for a single thing but I guess it's the futuuuurrre of webscale
>
-------------- next part --------------
diff --git a/web/html/home.php b/web/html/home.php
index ddbb0fd..6589230 100644
--- a/web/html/home.php
+++ b/web/html/home.php
@@ -118,8 +118,25 @@ $(document).ready(function() {
         matcher: function(item) { return true; },
         sorter: function(items) { return items; },
         menu: '<ul class="pkgsearch-typeahead"></ul>',
-        items: 20
+        items: 20,
+        updater: function(item) {
+            // Jump to package page directly if the user selects a package from
+            // the list
+            document.location = '/packages/' + item;
+            return item;
+        }
     }).attr('autocomplete', 'off');
+
+    // If the user presses enter and did not explicitly select a package from
+    // the dropdown list, don't interfere and submit the search form
+    $('#pkgsearch-field').keydown( function(e) {
+        if (e.keyCode == 13) {
+            var selectedItem = $('ul.pkgsearch-typeahead li.active');
+            if (selectedItem.length == 0) {
+                $('#pkgsearch-form').submit();
+            }
+        }
+    });
 });
 </script>
 <?php