Hello guys,
I'm implementing an approximate search in my web forms using jQuery, the issue is that, despite having translated the return phrase "result is available, use up and down arrow keys to navigate." in the file jquery-ui.min.js still does not appear in the end user in our language (Brazilian).
Another problem is that the layout is broken, how can I style this so that the list returns in a balloon below the field and overlays the fields on the page?
COD HTML:
<%@ Page Title="" Language="VB" MasterPageFile="MasterPage.master" AutoEventWireup="false" CodeFile="cadProfissoes.aspx.vb" Inherits="administrador_cadProfissoes" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<!-- #################################### SCRIPT AUTOCOMPLETE ####################################################### -->
<script src="../Scripts/jquery-1.10.0.min.js" type="text/javascript"></script>
<script src="../Scripts/jquery-ui.min.js" type="text/javascript"></script>
<link href="../Scripts/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(function () {
$("[id$=TxtNome]").autocomplete({
source: function (request, response) {
$.ajax({
url: '<%=ResolveUrl("cadProfissoes.aspx/GetCustomers") %>',
data: "{ 'prefix': '" + request.term + "'}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
response($.map(data.d, function (item) {
return {
label: item.split('-')[0],
val: item.split('-')[1]
}
}))
},
error: function (response) {
alert(response.responseText);
},
failure: function (response) {
alert(response.responseText);
}
});
},
select: function (e, i) {
$("[id$=hfIDBusca]").val(i.item.val);
},
minLength: 1
});
});
</script>
<!-- ########################################################################################### -->
<div id="titulo">Cadastro de Profissões</div>
<div>
<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" BackgroundCssClass="alert alert-warning"
PopupControlID="Panel1" TargetControlID="BtnExclui" CancelControlID="BtnCancela">
</asp:ModalPopupExtender>
<asp:HiddenField ID="hfID" runat="server" Value="0" />
<asp:HiddenField ID="hfIDBusca" runat="server" Value="0" />
</div>
<div id="grupobotoes">
<div>
<asp:Button ID="BtnNovo" runat="server" CssClass="btn btn-secondary" Text="Cancela" />
<asp:Button ID="BtnSalva" runat="server" CssClass="btn btn-success" Text="Salvar" />
<asp:Button ID="BtnExclui" runat="server" CssClass="btn btn-danger" Text="Excluir" />
</div>
<div>
<asp:Panel ID="Panel1" runat="server" CssClass="alert alert-danger">
<div>
<h3>Exclusão</h3>
</div>
<div>
<asp:Label ID="LbMensagem" runat="server">Tem certeza de que deseja excluir este registro?</asp:Label></div>
<div>
<asp:Button ID="BtnConfirma" runat="server" CssClass="btn btn-info" Text="Confirma" />
<asp:Button ID="BtnCancela" runat="server" CssClass="btn btn-secondary" Text="Cancelar" />
</div>
</asp:Panel>
</div>
</div>
<div id="grupocampos">
<div>Descrição:</div>
<div>
<asp:TextBox ID="TxtNome" runat="server" CssClass="form-control"></asp:TextBox>
</div>
</div>
<div id="grupogrids">
<asp:DataGrid ID="DataGrid1" runat="server" AllowPaging="True"
AutoGenerateColumns="False" CssClass="table" PageSize="20">
<alternatingitemstyle cssclass="gridAlternate" />
<columns>
<asp:BoundColumn DataField="ID" HeaderText="ID"></asp:BoundColumn>
<asp:BoundColumn DataField="NOME" HeaderText="NOME"></asp:BoundColumn>
<asp:ButtonColumn CommandName="Edit" HeaderText="EDITAR"
Text="<img src="../imagens/BtnEdita.png" border="0">">
<HeaderStyle Font-Bold="False" Font-Italic="False" Font-Overline="False"
Font-Strikeout="False" Font-Underline="False" HorizontalAlign="Center" />
<ItemStyle Font-Bold="False" Font-Italic="False" Font-Overline="False"
Font-Strikeout="False" Font-Underline="False" HorizontalAlign="Center" />
</asp:ButtonColumn>
<asp:ButtonColumn CommandName="Delete" HeaderText="EXCLUIR"
Text="<img src="../imagens/BtnExclui.png" border="0">">
<HeaderStyle Font-Bold="False" Font-Italic="False" Font-Overline="False"
Font-Strikeout="False" Font-Underline="False" HorizontalAlign="Center" />
<ItemStyle Font-Bold="False" Font-Italic="False" Font-Overline="False"
Font-Strikeout="False" Font-Underline="False" HorizontalAlign="Center" />
</asp:ButtonColumn>
</columns>
<headerstyle cssclass="bg-success" font-bold="True" />
<pagerstyle cssclass="gridpage" mode="NumericPages" />
</asp:DataGrid>
</div>
</asp:Content>
Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration
Imports System.Web.Services
Imports System.Web.Script.Services
Partial Class administrador_cadProfissoes
Inherits System.Web.UI.Page
Private Profissoes As New DETI.objProfissoes
Private fn As New Funcoes.classFuncao
' ############################ SCRIPT AUTOCOMPLETE #####################################################
<WebMethod()>
Public Shared Function GetCustomers(ByVal prefix As String) As String()
Dim customers As New List(Of String)()
Using conn As New SqlConnection()
conn.ConnectionString = ConfigurationManager.ConnectionStrings("cStrConexao2").ConnectionString
Using cmd As New SqlCommand()
cmd.CommandText = "SELECT NOME, ID FROM PROFISSOES WHERE NOME like @SearchText + '%'"
cmd.Parameters.AddWithValue("@SearchText", prefix)
cmd.Connection = conn
conn.Open()
Using sdr As SqlDataReader = cmd.ExecuteReader()
While sdr.Read()
customers.Add(String.Format("{0}-{1}", sdr("NOME"), sdr("ID")))
End While
End Using
conn.Close()
End Using
End Using
Return customers.ToArray()
End Function
End Class
Thanks for your attention, ilano.