3

Hey guys needing some assistance. I am wondering if I can add a function to only match the letters from left to right instead of bringing up any word with that letter to my current code. For example if I search A and my list contains Apple and Banana only Apple should come up. I know this has already been asked but looking for something that works with my current code. 

$(document).ready(function() {
  $("input.autocomplete").autocomplete({
    minLength: 1,

    source: [{
        value: "Equipment Search",
        url: ''
      }
     
    ],
    select: function(event, ui) {
      window.open(ui.item.url);
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div class="input-group">
  <input type="text" id="appsearch" class="form-control autocomplete" placeholder="Application Search" />
  <span class="input-group-btn">
      <button class="btn btn-primary inputBtn" id="appSearchBtn" type="button">Search</button>
  </span>
</div>
Mark White
  • 173
  • 2
  • 3
  • 14
  • If you want to match on only the first letter, you will need to build your own filter for `source: function(request, response){}`. Will post an answer. – Twisty Apr 25 '17 at 16:22
  • 1
    Related question: https://stackoverflow.com/questions/3148195/jquery-ui-autocomplete-use-startswith – user2314737 Dec 15 '17 at 18:55

3 Answers3

2

One way to do it is override the default functionality;

// Overrides the default autocomplete filter function to search only from the beginning of the string
$.ui.autocomplete.filter = function (array, term) {
    var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(term), "i");
    return $.grep(array, function (value) {
        return matcher.test(value.label || value.value || value);
    });
};

Here's a fiddle of this working:

http://jsfiddle.net/yLdn3/324/

Avitus
  • 15,640
  • 6
  • 43
  • 53
  • 1
    It should be noted that this would override the filter for all autocompletes on the page. So if there is just 1, this is great! If there are 2, and they each need a different filter type, this causes issues. – Twisty Apr 25 '17 at 16:40
2

As I commented, you can do this using a Function for source.

Working Example: https://jsfiddle.net/Twisty/5gm0tmLh/

JavaScript

var mySource = [{
  value: "Equipment Search",
  url: 'https://domaina.com/equipment/default.aspx'
}, {
  value: "Equipment Search Dev",
  url: 'https://domaina.com/equipment/default.aspx'
}, {
  value: "Equipment Search QA",
  url: 'https://domaina.com/equipment/default.aspx'
}, {
  value: "FCSF",
  url: 'http://domainb.com/aspnet35/POSLogin/Login.aspx?AppName=Console&ConsoleApp=CSF'
}, {
  value: "Hitch Matrix",
  url: 'https://domainc.com/secure/aspnet4/hitchmatrix/manage_hitches.aspx'
}, {
  value: "Kiosk Dev",
  url: 'http://domainc.com/aspnet3/kioskadmin/'
}, {
  value: "Kiosk",
  url: 'https://domaina.com/secure/kioskadmin/'
}, {
  value: "MOAS",
  url: 'https://domaina.com/tools/inventory_control/login_main.aspx?ReturnUrl=%2ftools%2finventory_control%2fOrderApproval.aspx%20'
}, {
  value: "POS Admin",
  url: 'https://domainb.com/POSAdmin'
}, {
  value: "QA Tool Dev",
  url: 'http://domainc.com/aspnet4/NewQAAdmin/login.aspx'
}, {
  value: "QA Tool",
  url: 'https://domaina.com/QAAdmin/login.aspx'
}, {
  value: "RT Admin Tool",
  url: 'https://domaina.com/secure/rta/login/adminlogin'
}, {
  value: "Uchat Dev",
  url: 'https://domaina.com/tools/uchat_app/publish.htm'
}, {
  value: "Uchat",
  url: 'https://domaina.com/tools/uchat_app/publish.htm'
}, {
  value: "Uscan Service Logger (Dev)",
  url: 'http://mdomainc.com/aspnet4/ServiceLogger/'
}, {
  value: "Uscan Service Logger",
  url: 'https://domainc.com/secure/aspnet4/ServiceLogger'
}, {
  value: "VIP Look Up",
  url: 'https://domaina.com/tools/certificate/default.aspx'
}, ];

$(function() {
  $("input.autocomplete").autocomplete({
    minLength: 1,
    source: function(req, resp) {
      var q = req.term;
      var myResponse = [];
      $.each(mySource, function(key, item) {
        if (item.value.toLowerCase().indexOf(q) === 0) {
          myResponse.push(item);
        }
      });
      resp(myResponse);
    },
    select: function(event, ui) {
      window.open(ui.item.url);
    }
  });
});

From the API:

Function: The third variation, a callback, provides the most flexibility and can be used to connect any data source to Autocomplete. The callback gets two arguments:

  • A request object, with a single term property, which refers to the value currently in the text input. For example, if the user enters "new yo" in a city field, the Autocomplete term will equal "new yo".

  • A response callback, which expects a single argument: the data to suggest to the user. This data should be filtered based on the provided term, and can be in any of the formats described above for simple local data. It's important when providing a custom source callback to handle errors during the request. You must always call the response callback even if you encounter an error. This ensures that the widget always has the correct state.

When filtering data locally, you can make use of the built-in $.ui.autocomplete.escapeRegex function. It'll take a single string argument and escape all regex characters, making the result safe to pass to new RegExp().

Hope that helps.

Community
  • 1
  • 1
Twisty
  • 30,304
  • 2
  • 26
  • 45
  • 1
    Thank you @Twisty, that worked! I really appreciate your help with this! – Mark White Apr 25 '17 at 17:27
  • @MarkWhite if you want the URLs to be modified, it would be best to comment and let me know. I can then adjust them to some other value. The post still should show some value; such that it can be helpful to other people that might find this question. – Twisty Dec 18 '17 at 15:31
  • Sorry about that but I needed the URL's to be taken down ASAP. I forgot about this post and the URL's on there should have never been posted. – Mark White Dec 18 '17 at 20:18
  • 1
    @MarkWhite scrubbed. – Twisty Dec 18 '17 at 21:28
  • 1
    @MarkWhite I also noticed that you never marked one of these as an answer. I hope that one of the answers helped you and would mark it as the answer. – Twisty Dec 18 '17 at 21:41
0

Here's a solution adapting one of the examples from https://api.jqueryui.com/autocomplete/#entry-examples (using a custom source callback to match only the beginning of terms)

$(document).ready(function() {
  var data = [{
      value: "Equipment Search",
      url: ''
    },
    {
      value: "Equipment Search Dev",
      url: ''
    },
    {
      value: "Equipment Search QA",
      url: ''
    },
    {
      value: "FCSF",
      url: ''
    },
    {
      value: "Hitch Matrix",
      url: ''
    },
    {
      value: "Kiosk Dev",
      url: ''
    },
    {
      value: "Kiosk",
      url: ''
    },
    {
      value: "MOAS",
      url: ''
    },
    {
      value: "POS Admin",
      url: ''
    },
    {
      value: "QA Tool Dev",
      url: ''
    },
    {
      value: "QA Tool",
      url: ''
    },
    {
      value: "RT Admin Tool",
      url: ''
    },
    {
      value: "Uchat Dev",
      url: ''
    },
    {
      value: "Uchat",
      url: ''
    },
    {
      value: "Uscan Service Logger (Dev)",
      url: ''
    },
    {
      value: "Uscan Service Logger",
      url: ''
    },
    {
      value: "VIP Look Up",
      url: ''
    },
  ];


  $("input.autocomplete").autocomplete({
    minLength: 1,
    source: function(request, response) {
      var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(request.term), "i");
      response($.grep(data, function(item) {
        return matcher.test(item.value);
      }));
    },
    select: function(event, ui) {
      window.open(ui.item.url);
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<div class="input-group">
  <input type="text" id="appsearch" class="form-control autocomplete" placeholder="Application Search" />
  <span class="input-group-btn">
      <button class="btn btn-primary inputBtn" id="appSearchBtn" type="button">Search</button>
  </span>
</div>
Mark White
  • 173
  • 2
  • 3
  • 14
user2314737
  • 27,088
  • 20
  • 102
  • 114