All geek questions in one place

Multiple Keyword Autofill

I'm not sure if this is possible, but I would like to make jquery-ui autocomplete work with multiple keywords for the same result.

Here is an example , but it's quite old, and I couldn't get it to work, even with older jquery files. I am not familiar with jquery and javascript, but I am able to edit existing things.

This is what I have (without any adjustments for the multiple keyword):

<script type="text/javascript"> $(document).ready(function() { NewAuto(); }); function NewAuto() { var products = [ <?php foreach($search__1 as $search) { echo "{value: '". $search['product_name'] ."'}, ";}?> ]; $("#keyword").autocomplete({ source: function(requestObj, responseFunc) { var matchArry = products.slice(); // Copy the array var srchTerms = $.trim(requestObj.term).split(/\s+/); // For each search term, remove non-matches. $.each(srchTerms, function(J, term) { var regX = new RegExp(term, "i"); matchArry = $.map(matchArry, function(item) { return regX.test(item) ? item : null; }); }); // Return the match results. responseFunc(matchArry); }, open: function(event, ui) { // This function provides no hooks to the results list, so we have to trust the selector, for now. var resultsList = $("ul.ui-autocomplete > li.ui-menu-item > a"); var srchTerm = $.trim($("#keyword").val()).split(/\s+/).join('|'); // Loop through the results list and highlight the terms. resultsList.each(function() { var jThis = $(this); var regX = new RegExp('(' + srchTerm + ')', "ig"); var oldTxt = jThis.text(); jThis.html(oldTxt.replace(regX, '<span class="srchHilite">$1</span>')); }); } }); } </script>
+4
source share
2 answers

If I understand ur correctly, you want to show a list that matches several words of the same sentence.

Click here for example

  <html> <head> <title>Testing</title> <link href="css/jquery-ui-1.10.3.custom.css" rel="stylesheet" type="text/css" /> <style type="text/css"> .srchHilite { background: yellow; } </style> <script src="scripts/jquery-1.9.1.min.js" type="text/javascript"></script> <script src="scripts/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { NewAuto(); }); function NewAuto() { var availableTags = ["win the day", "win the heart of", "win the heart of someone"]; alert(availableTags); // alert = win the day,win the heart of,win the heart of someone $("#tags").autocomplete({ source: function(requestObj, responseFunc) { var matchArry = availableTags.slice(); // Copy the array var srchTerms = $.trim(requestObj.term).split(/\s+/); // For each search term, remove non-matches. $.each(srchTerms, function(J, term) { var regX = new RegExp(term, "i"); matchArry = $.map(matchArry, function(item) { return regX.test(item) ? item : null; }); }); // Return the match results. responseFunc(matchArry); }, open: function(event, ui) { // This function provides no hooks to the results list, so we have to trust the selector, for now. var resultsList = $("ul.ui-autocomplete > li.ui-menu-item > a"); var srchTerm = $.trim($("#tags").val()).split(/\s+/).join('|'); // Loop through the results list and highlight the terms. resultsList.each(function() { var jThis = $(this); var regX = new RegExp('(' + srchTerm + ')', "ig"); var oldTxt = jThis.text(); jThis.html(oldTxt.replace(regX, '<span class="srchHilite">$1</span>')); }); } }); } </script> </head> <body> <div> <label for="tags"> Multi-word search: </label> <input type="text" id="tags" /> </div> </body> </html>
+3
source

I get the name of the form in the city form and show it using autocomplete.

  function GetLocalityList() { var LocalityArray = []; $.post("MvcLayer/Index/GetLocalityList", { CityID: $('#sltCity').val() }, function(data) { // My sql query will be like this select LocalityID, CityID, LocalityName from tablename where CityID = 20 // Here (data) is array format. Like this // [{"LocalityID":9397,"CityID":55,"LocalityName":"Adugodi"},{"LocalityID":9398,"CityID":55,"LocalityName":"Aga Abbas Ali Road"},{"LocalityID":9399,"CityID":55,"LocalityName":"Agaram"},{"LocalityID":9400,"CityID":55,"LocalityName":"Agrahara Dasara Halli"},{"LocalityID":9401,"CityID":55,"LocalityName":"Agrahara Dasarahalli"},{"LocalityID":9402,"CityID":55,"LocalityName":"Airport Exit Road"},{"LocalityID":9403,"CityID":55,"LocalityName":"Horamavu"},{"LocalityID":9404,"CityID":55,"LocalityName":"Hosakere Halli"},{"LocalityID":9405,"CityID":55,"LocalityName":"Hennur"},{"LocalityID":9406,"CityID":55,"LocalityName":"Hesaraghatta"},{"LocalityID":9407,"CityID":55,"LocalityName":"HKP Road"},{"LocalityID":9408,"CityID":55,"LocalityName":"HMT Layout"},{"LocalityID":9409,"CityID":55,"LocalityName":"Hongasandra"},{"LocalityID":9410,"CityID":55,"LocalityName":"Hoody"},{"LocalityID":9411,"CityID":55,"LocalityName":"Hayes Road"} ] $.each(data, function(key, value) { LocalityArray[key] = value.LocalityName; }); $("#txtLocality" + SelectedTab).autocomplete({ minLength: 1, source: function(req, responseFn) { // \\b show each match letter in each word of list // ^ show each match letter in whole word of list var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(req.term), "i"); var a = $.grep(LocalityArray, function(item, index) { return matcher.test(item); }); responseFn(a); } }); }, 'json' ); }
0
source

Source: https://habr.com/ru/post/1480927/

More articles:


All Articles