javascript - Jquery autocomplete doesn't work

I got the following code from jquery ui demo. I did some minor modifications to that. Here is the modified code.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Autoplete - Custom data and display</title>
  <link rel="stylesheet" href="//code.jquery/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery/jquery-1.9.1.js"></script>
  <script src="//code.jquery/ui/1.10.4/jquery-ui.js"></script>
  <!--link rel="stylesheet" href="/resources/demos/style.css"-->
  <style>
  #project-label {
    display: block;
    font-weight: bold;
    margin-bottom: 1em;
  }
  #project-description {
    margin: 0;
    padding: 0;
  }
  </style>
  <script>
  $(function() {
    var projects = [
      {
        id: "jquery",
        name: "jQuery",
        location: "the write less, do more, JavaScript library"
      },
      {
        id: "jquery-ui",
        name: "jQuery UI",
        location: "the official user interface library for jQuery"
      },
      {
        id: "sizzlejs",
        name: "Sizzle JS",
        location: "a pure-JavaScript CSS selector engine"
      }
    ];

    $( "#project" ).autoplete({
      minLength: 0,
      source: projects,
      focus: function( event, ui ) {
        $( "#project" ).val( ui.item.name );
        return false;
      },
      select: function( event, ui ) {
        $( "#project" ).val( ui.item.name );
        $( "#project-id" ).val( ui.item.id );
        $( "#project-description" ).html( ui.item.location );

        return false;
      }
    })
    .data( "ui-autoplete" )._renderItem = function( ul, item ) {
      return $( "<li>" )
        .append( "<a>" + item.name + "<br>" + item.location + "</a>" )
        .appendTo( ul );
    };
  });
  </script>
</head>
<body>

<div id="project-label">Select a project (type "j" for a start):</div>
<input id="project">
<input type="hidden" id="project-id">
<p id="project-description"></p>


</body>
</html>

Now jquery pops up autoplete suggestions only when 'j' key is pressed. for other keys it doesn't do anything. what am I doing wrong here?

I got the following code from jquery ui demo. I did some minor modifications to that. Here is the modified code.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Autoplete - Custom data and display</title>
  <link rel="stylesheet" href="//code.jquery./ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery./jquery-1.9.1.js"></script>
  <script src="//code.jquery./ui/1.10.4/jquery-ui.js"></script>
  <!--link rel="stylesheet" href="/resources/demos/style.css"-->
  <style>
  #project-label {
    display: block;
    font-weight: bold;
    margin-bottom: 1em;
  }
  #project-description {
    margin: 0;
    padding: 0;
  }
  </style>
  <script>
  $(function() {
    var projects = [
      {
        id: "jquery",
        name: "jQuery",
        location: "the write less, do more, JavaScript library"
      },
      {
        id: "jquery-ui",
        name: "jQuery UI",
        location: "the official user interface library for jQuery"
      },
      {
        id: "sizzlejs",
        name: "Sizzle JS",
        location: "a pure-JavaScript CSS selector engine"
      }
    ];

    $( "#project" ).autoplete({
      minLength: 0,
      source: projects,
      focus: function( event, ui ) {
        $( "#project" ).val( ui.item.name );
        return false;
      },
      select: function( event, ui ) {
        $( "#project" ).val( ui.item.name );
        $( "#project-id" ).val( ui.item.id );
        $( "#project-description" ).html( ui.item.location );

        return false;
      }
    })
    .data( "ui-autoplete" )._renderItem = function( ul, item ) {
      return $( "<li>" )
        .append( "<a>" + item.name + "<br>" + item.location + "</a>" )
        .appendTo( ul );
    };
  });
  </script>
</head>
<body>

<div id="project-label">Select a project (type "j" for a start):</div>
<input id="project">
<input type="hidden" id="project-id">
<p id="project-description"></p>


</body>
</html>

Now jquery pops up autoplete suggestions only when 'j' key is pressed. for other keys it doesn't do anything. what am I doing wrong here?

Share Improve this question asked Feb 22, 2014 at 2:40 DamithK 311 silver badge5 bronze badges

It would be nice to have a jsfiddle for this. – reergymerej Commented Feb 22, 2014 at 2:41
fiddle jsfiddle/arunpjohny/rh8n7/1 – Arun P Johny Commented Feb 22, 2014 at 2:45

Add a ment |

2 Answers 2

Sorted by: Reset to default 3

It is because of the default search mechanism, it filters the contents based on the fields label or value.

With your custom data, it is better to implement the source method yourself like,

$("#project").autoplete({
    minLength: 0,
    source: function (request, response) {
        var matcher = new RegExp($.ui.autoplete.escapeRegex(request.term), "i");
        var array = $.grep(projects, function (value) {
            return matcher.test(value.id) || matcher.test(value.name) || matcher.test(value.location);
        });
        response(array);
    },
    focus: function (event, ui) {
        $("#project").val(ui.item.name);
        return false;
    },
    select: function (event, ui) {
        $("#project").val(ui.item.name);
        $("#project-id").val(ui.item.id);
        $("#project-description").html(ui.item.location);

        return false;
    }
})
    .data("ui-autoplete")._renderItem = function (ul, item) {
    return $("<li>")
        .append("<a>" + item.name + "<br>" + item.location + "</a>")
        .appendTo(ul);
};

Demo: Fiddle

You must have a value attribute on your projects array:

var projects = [
        {
            id: "jquery",
            name: "jQuery",
            value:"jQuery",
            location: "the write less, do more, JavaScript library"
        },
        ...
        {
            id: "sizzlejs",
            name: "sizzle JS",
            value:"sizzle JS",
            location: "a pure-JavaScript CSS selector engine"
        }
    ];

This way the search engine is going to work.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Jquery autocomplete doesn't work - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)