javascript - How to use array in autocomplete textbox jquery? - Stack Overflow

admin管理员组

文章数量:1352834

For Example

<link rel="stylesheet" href="//code.jquery/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery/jquery-1.10.2.js"></script>
<script src="//code.jquery/ui/1.11.4/jquery-ui.js"></script>

<script>
    $(function() { 
        var availableTags = [ "ActionScript", "AppleScript", "Asp"];
        var availableTagsCode = ["1", "2", "3"]; 
        $( "#tags" ).autoplete({ source: availableTags });
    });
</script>

<input id="tags" name="name">
<input id="tags_code" name="code">

Actually, I have tried to change code while select suggestion using following code:

$("#tags_code").val(availableTagsCode); 

I need to select suggestion test if i will select 0th array from tag the 0th code should assign to name="code" textbox.
Please help me to resolve this problem.

For Example

<link rel="stylesheet" href="//code.jquery./ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery./jquery-1.10.2.js"></script>
<script src="//code.jquery./ui/1.11.4/jquery-ui.js"></script>

<script>
    $(function() { 
        var availableTags = [ "ActionScript", "AppleScript", "Asp"];
        var availableTagsCode = ["1", "2", "3"]; 
        $( "#tags" ).autoplete({ source: availableTags });
    });
</script>

<input id="tags" name="name">
<input id="tags_code" name="code">

Actually, I have tried to change code while select suggestion using following code:

$("#tags_code").val(availableTagsCode); 

I need to select suggestion test if i will select 0th array from tag the 0th code should assign to name="code" textbox.
Please help me to resolve this problem.

• javascript
• jquery
• autoplete
• textbox

Share Improve this question Follow edited Oct 30, 2015 at 9:11 Yeldar Kurmangaliyev 34.3k1313 gold badges6464 silver badges104104 bronze badges asked Oct 30, 2015 at 6:20 Dinesh GDinesh G 1,36555 gold badges1717 silver badges2424 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Set select event handler

$(function() {
  var availableTags = ["ActionScript", "AppleScript", "Asp"];
  var availableTagsCode = ["1", "2", "3"];
  $("#tags").autoplete({
    source: availableTags,
    select: function(e, ui) {
      $('#tags_code').val(availableTagsCode[availableTags.indexOf(ui.item.value)]);
    }
  });
});

<link rel="stylesheet" href="//code.jquery./ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery./jquery-1.10.2.js"></script>
<script src="//code.jquery./ui/1.11.4/jquery-ui.js"></script>
<input id="tags" name="name">
<input id="tags_code" name="code">

You can define a select event handler:

$( "#tags" ).autoplete({ 
    source: availableTags,
    select: function(event, ui) {
        var index = availableTags.indexOf(ui.item.value);
        $("#tags_code").val(availableTagsCode[index]);  
    }
});

Here is the working JSFiddle demo.

Actually, jQuery UI allows you to use an array of objects with value and label properties when you provide source.
So, something like this will work and look better:

var tags = [
    {"label": "ActionScript", "value": 1},
    {"label": "AppleScript", "value": 2},
    {"label": "Asp", "value": 3}
];

$( "#tags" ).autoplete({ 
    source: tags,
    select: function (event, ui) {
        $("#tags_code").val(ui.item.value);  
    }
});

JSFiddle demo for the second approach.

If you don't want the value to be replaced after choosing, you can use custom property instead of value:

var tags = [
    {"label": "ActionScript", "code": 1},
    {"label": "AppleScript", "code": 2},
    {"label": "Asp", "code": 3}
];

$( "#tags" ).autoplete({ 
    source: tags,
    select: function (event, ui) {
        $("#tags_code").val(ui.item.code);  
    }
});

JSFiddle demo.

<script type="text/javascript">  
    $(document).ready(function () {
        $("#textBoxID").autoplete({
            source: function (request, responce) {
                $.ajax({
                    url: "webservice_Name.asmx/webservice_functionName",
                    method: "post",
                    contentType: "application/json;charset=utf-8",
                    data: JSON.stringify({ parameterName: request.term }),
                    dataType: 'json',
                    success: function (data) {

                        responce(data.d);
                        if (data.d.length > 0)
                            $('#spnError').text("");
                        else
                            $('#spnError').text("Not Matching Any Result");
                        console.log(data.d.length);
                    },
                    error: function (err) {
                        alert(err);
                    }
                });
            },
            minLength: 2,
            select: function (event, ui) {
                console.log("You selected: " + ui.item.label);
                $.ajax({
                    url: "webservice_Name.asmx/webservice_functionNameForgetID",
                    method: "post",
                    contentType: "application/json;charset=utf-8",
                    data: JSON.stringify({ parameterName: ui.item.label }),
                    dataType: 'json',
                    success: function (data) {
                        console.log(data.d);

                    },
                    error: function (err) {
                        alert(err);
                    }
                });
            }
        });
    });
</script>

本文标签： javascriptHow to use array in autocomplete textbox jqueryStack Overflow